js中的引号嵌套问题


<html>
  <head>
    <meta charset="utf-8">
  head>
  <body>
    <h3>单引号h3>
    <div id="single_quotes">div>
    <hr/>
    <h3>双引号h3>
    <div id="double_quotes">div>
    <h3>打印区域h3>
    <div id="print_box">div>
  body>
  <script type="text/javascript" src="jquery-3.0.0.min.js">script>
  <script type="text/javascript">
    $(function(){
      oneLayerNesting();  //一层嵌套
      twoLayerNesting();  //两层嵌套
      threeLayerNesting();  //三层嵌套
      fourLayerNesting();  //四层嵌套
    });

    function oneLayerNesting(){
      $("#single_quotes").append('
'
); $("#double_quotes").append("
"
); } function twoLayerNesting(){ $("#single_quotes").append('
'
); $("#double_quotes").append("
"
); } function threeLayerNesting(){ var value = "三层嵌套"; $("#single_quotes").append('');" />');/*错误例子-1-点击报错:ReferenceError: \u4E09\u5C42\u5D4C\u5957 is not defined*/ $("#double_quotes").append("");/*错误例子-1-点击报错:ReferenceError: \u4E09\u5C42\u5D4C\u5957 is not defined*/ $("#single_quotes").append('+value+'");" />');/*错误例子-2-显示错误:*/ $("#double_quotes").append("+value+"');' />");/*错误例子-2-显示错误:*/ $("#single_quotes").append('+value+'\");" />');/*错误例子-3-显示错误:*/ $("#double_quotes").append("+value+"\');' />");/*错误例子-3-显示错误:*/ $("#single_quotes").append('\");" />');/*错误例子-4-显示错误:*/ $("#double_quotes").append("\,);' />");/*错误例子-4-显示错误:*/ $("#single_quotes").append(''\');" />');/*正确例子-1*/ $("#double_quotes").append("");/*正确例子-1*/ $("#single_quotes").append('
'
);/*正确例子-2*/ $("#double_quotes").append("
"
);/*正确例子-2*/ } function fourLayerNesting(){ $("#single_quotes").append('\');" />');/*错误例子-1-显示错误:*/ $("#double_quotes").append("\");' />");/*错误例子-1-显示错误:*/ //'是单引号的转义符,"是双引号的转义符 $("#single_quotes").append('
'
);/*正确例子*/ $("#double_quotes").append("
"
);/*正确例子*/ } function printHtml(html){ $("#print_box").append(html); } function printValue(value){ console.log("value="+value); }
script>
html>

通过以上运行结果可知,在js中的引号嵌套时单引号和双引号是交替使用的,基本规律如下(<=4层):

-   单引号:' " \' " 单引号 " \' " '
-   双引号:" ' \" ' 双引号 ' \" ' "

当然对于五层以上的嵌套目前还没有什么好的解决方案,不过4层嵌套已经可以解决绝大部分的应用场景了。

你可能感兴趣的:(前端,jquery,javascript)