js中的引号嵌套问题

来源：互联网发布：广告法淘宝处罚案例编辑：程序博客网时间：2024/05/14 18:03

<!DOCTYPE html><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('<input /><br/>');      $("#double_quotes").append("<input /><br/>");    }    function twoLayerNesting(){      $("#single_quotes").append('<input value="两层嵌套" /><br/>');      $("#double_quotes").append("<input value='两层嵌套' /><br/>");    }    function threeLayerNesting(){      var value = "三层嵌套";      $("#single_quotes").append('<input value="三层嵌套-错误例子-1" onclick="printValue('+value+');" />');/*错误例子-1-点击报错:ReferenceError: \u4E09\u5C42\u5D4C\u5957 is not defined*/      $("#double_quotes").append("<input value='三层嵌套-错误例子-1' onclick='printValue("+value+");' />");/*错误例子-1-点击报错:ReferenceError: \u4E09\u5C42\u5D4C\u5957 is not defined*/      $("#single_quotes").append('<input value="三层嵌套-错误例子-2" onclick="printValue("'+value+'");" />');/*错误例子-2-显示错误:<input value="三层嵌套" onclick="printValue(" 三层嵌套");"="">*/      $("#double_quotes").append("<input value='三层嵌套-错误例子-2' onclick='printValue('"+value+"');' />");/*错误例子-2-显示错误:<input value="三层嵌套" onclick="printValue(" 三层嵌套");"="">*/      $("#single_quotes").append('<input value="三层嵌套-错误例子-3" onclick="printValue(\"'+value+'\");" />');/*错误例子-3-显示错误:<input value="三层嵌套" onclick="printValue(" 三层嵌套");"="">*/      $("#double_quotes").append("<input value='三层嵌套-错误例子-3' onclick='printValue(\'"+value+"\');' />");/*错误例子-3-显示错误:<input value="三层嵌套" onclick="printValue(" 三层嵌套");"="">*/      $("#single_quotes").append('<input value="三层嵌套-错误例子-4" onclick="printHtml(\"<input/>\");" />');/*错误例子-4-显示错误:<input value="三层嵌套-错误例子-4" onclick="printHtml(" <input="">*/      $("#double_quotes").append("<input value='三层嵌套-错误例子-4' onclick='printHtml(\'<input/>\,);' />");/*错误例子-4-显示错误:<input value="三层嵌套-错误例子-4" onclick="printHtml(" <input="">*/      $("#single_quotes").append('<input value="三层嵌套-正确例子-1" onclick="printValue(\''+value+'\');" />');/*正确例子-1*/      $("#double_quotes").append("<input value='三层嵌套-正确例子-1' onclick='printValue(\""+value+"\");' />");/*正确例子-1*/      $("#single_quotes").append('<input value="三层嵌套-正确例子-2" onclick="printHtml(\'<input/>\');" /><br/>');/*正确例子-2*/      $("#double_quotes").append("<input value='三层嵌套-正确例子-2' onclick='printHtml(\"<input/>\");' /><br/>");/*正确例子-2*/    }    function fourLayerNesting(){      $("#single_quotes").append('<input value="四层嵌套-错误例子-1" onclick="printHtml(\'<input value=\"四层嵌套\"/>\');" />');/*错误例子-1-显示错误:<input value="四层嵌套" onclick="printHtml('<input value=" 四层嵌套"="">*/      $("#double_quotes").append("<input value='四层嵌套-错误例子-1' onclick='printHtml(\"<input value=\'四层嵌套\'/>\");' />");/*错误例子-1-显示错误:<input value="四层嵌套" onclick="printHtml('<input value=" 四层嵌套"="">*/      //&apos;是单引号的转义符，&quot;是双引号的转义符      $("#single_quotes").append('<input value="四层嵌套-正确例子" onclick="printHtml(\'<input value=&quot;四层嵌套-单引号&quot;/>\');" /><br/>');/*正确例子*/      $("#double_quotes").append("<input value='四层嵌套-正确例子' onclick='printHtml(\"<input value=&apos;四层嵌套-双引号&apos;/>\");' /><br/>");/*正确例子*/    }    function printHtml(html){      $("#print_box").append(html);    }    function printValue(value){      console.log("value="+value);    }  </script></html>

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

-   单引号：' " \' &quot; 单引号 &quot; \' " '-   双引号：" ' \" &apos; 双引号 &apos; \" ' "

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

0 0