js中的引号嵌套问题

作者：KING逊咖 | 来源：互联网 | 2023-10-12 18:59

<!DOCTYPEhtml><html><head><metacharsetutf-8><head&g


<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层嵌套已经可以解决绝大部分的应用场景了。

推荐阅读

get
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
config
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
controller
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
java
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
java
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
hash
[大整数乘法] java代码实现

本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]

蜡笔小新 2023-12-13 11:21:32
get
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
get
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
bash
【shell】网络处理：判断IP是否在网段、两个ip是否同网段、IP地址范围、网段包含关系

本文介绍了使用shell脚本判断IP是否在同一网段、判断IP地址是否在某个范围内、计算IP地址范围、判断网段之间的包含关系的方法和原理。通过对IP和掩码进行与计算，可以判断两个IP是否在同一网段。同时，还提供了一段用于验证IP地址的正则表达式和判断特殊IP地址的方法。 ... [详细]

蜡笔小新 2023-12-12 11:19:14
get
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
get
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
function
不同优化算法的比较分析及实验验证

本文介绍了神经网络优化中常用的优化方法，包括学习率调整和梯度估计修正，并通过实验验证了不同优化算法的效果。实验结果表明，Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]

蜡笔小新 2023-12-13 16:05:14
java
从零学Java（10）之方法详解，喷打野你真的没我6！

本文介绍了从零学Java系列中的第10篇文章，详解了Java中的方法。同时讨论了打野过程中喷打野的影响，以及金色打野刀对经济的增加和线上队友经济的影响。指出喷打野会导致线上经济的消减和影响队伍的团结。 ... [详细]

蜡笔小新 2023-12-13 13:44:16
get
Java中闭包的争论以及闭包的定义和特性

闭包一直是Java社区中争论不断的话题，很多语言都支持闭包这个语言特性，闭包定义了一个依赖于外部环境的自由变量的函数，这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例，介绍了闭包的定义和特性。 ... [详细]

蜡笔小新 2023-12-13 10:46:54
java
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59

KING逊咖

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章