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

推荐阅读

web
如何利用jQuery的JSONP技术实现跨域调用外部Web服务？

本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用，本文提供了实用的代码示例和最佳实践，帮助开发者解决跨域请求中的常见问题。 ... [详细]

蜡笔小新 2024-11-07 09:24:55
io
Knockout.js 中 if 和 visible 绑定的最佳实践

探讨在特定情况下使用 Knockout.js 的 if 或 visible 绑定的最佳实践，特别是在处理未定义对象时的策略。 ... [详细]

蜡笔小新 2024-12-09 10:44:36
web
深入理解Vue.js：从入门到精通

本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例，帮助开发者全面掌握这一流行的前端框架。 ... [详细]

蜡笔小新 2024-12-22 11:07:54
io
使用纯JavaScript实现贪吃蛇游戏的开发技巧与解析

本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例，深入解析了游戏逻辑、动画效果及用户交互的实现过程，为开发者提供了宝贵的参考和实践经验。 ... [详细]

蜡笔小新 2024-11-08 13:56:09
python
字符串中特定字符的移除方法

本文介绍如何从字符串中移除大写、小写、特殊、数字和非数字字符，并提供了多种编程语言的实现示例。 ... [详细]

蜡笔小新 2024-12-22 00:08:06
header
如何在Kendo UI for jQuery中将行标题显示为可点击链接

本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中，将行标题字段呈现为锚点（即可点击链接），帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释，即使是新手也能轻松掌握。 ... [详细]

蜡笔小新 2024-12-21 17:07:41
php
解决C# Windows Forms客户端连接SignalR服务器时出现的错误

在尝试使用C# Windows Forms客户端通过SignalR连接到ASP.NET服务器时，遇到了内部服务器错误（500）。本文将详细探讨问题的原因及解决方案。 ... [详细]

蜡笔小新 2024-12-21 16:55:52
python
Python 中 Pmagick 的木炭滤镜方法

本文介绍了 Python 的 Pmagick 库中用于图像处理的木炭滤镜方法，探讨其功能和用法，并通过实例演示如何应用该方法。 ... [详细]

蜡笔小新 2024-12-21 13:44:30
config
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
io
Django 使用slug field时遇到的问题

Django 使用slug field时遇到的问题 ... [详细]

蜡笔小新 2024-12-20 16:18:11
ip
JavaScript 实现查询当前年份共有多少周及每周的具体日期范围

本文介绍如何使用JavaScript计算并显示指定年份的周数以及每周的起止日期，例如2015年的第1周从1月1日至1月7日，第2周从1月8日至1月15日。 ... [详细]

蜡笔小新 2024-11-28 13:08:30
web
如何在HTML中嵌入JavaScript文件 - Techniques for Integrating .js Files into HTML Documents

将JavaScript文件嵌入HTML文档是Web开发中的基本操作。常见的方法是通过在HTML文件中使用``标签来引用外部的.js文件。这种方法不仅保持了代码的整洁性，还便于管理和维护。此外，还可以利用模块化脚本和异步加载技术进一步提升页面性能。 ... [详细]

蜡笔小新 2024-11-07 08:55:02
const
如何根据浏览器类型动态加载npm包以优化前端性能？

本文探讨了如何通过检测浏览器类型来动态加载特定的npm包，从而优化前端性能。具体而言，仅在用户使用Edge浏览器时加载相关包，以提升页面加载速度和整体用户体验。此外，文章还介绍了实现这一目标的技术细节和最佳实践，包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]

蜡笔小新 2024-11-06 13:30:57
io
在 Angular Google Maps 中实现图片嵌入信息窗口功能 - Embedding Images into Info Windows in Angular Google Maps

在 Angular Google Maps 中实现图片嵌入信息窗口的功能，可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件，使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件，以实现动态加载和显示图片的功能。此外，还将探讨一些常见的问题和解决方案，帮助开发者更好地集成这一功能。 ... [详细]

蜡笔小新 2024-11-05 10:58:38
header
SQL Server 中 INSERT 语句无法插入数据的问题分析与解决

本文探讨了在 SQL Server 中使用 JDBC 插入数据时遇到的问题。通过详细分析代码和数据库配置，提供了解决方案并解释了潜在的原因。 ... [详细]

蜡笔小新 2024-12-21 09:52:27

KING逊咖

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

Tags | 热门标签

RankList | 热门文章