首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

    在JavaScript中实现电子邮件和密码的输入验证 - Implementing Input Validation for Email and Password in JavaScript

    本文旨在构建一个JavaScript函数，用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式，并检查密码强度，以提升用户账户的安全性。通过集成正则表达式和条件判断语句，该方法能够有效防止常见的输入错误，同时提供即时反馈，改善用户体验。 ... [详细]
  • java

    在 Angular Google Maps 中实现图片嵌入信息窗口功能 - Embedding Images into Info Windows in Angular Google Maps

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

    使用纯JavaScript实现贪吃蛇游戏的开发技巧与解析

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

    优化 DOM 以提升 JavaScript 性能

    本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能，包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • java

    Struts2 + json+ jquery 实现三级联动action和jsp代码竟然有小红叉，提示缺双引号，检查了转义符号也没缺啊，求解

    publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • java

    解决JavaScript中法语字符排序问题

    解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时，遇到从SQLite数据库中提取的法语词汇排序不正确的问题，特别是带重音符号的字母未按预期排序。 ... [详细]
  • java

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

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

    如何在HTML中嵌入JavaScript文件 - Techniques for Integrating .js Files into HTML Documents

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

    如何根据浏览器类型动态加载npm包以优化前端性能？

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

    UVALive 8201 - BBP 公式计算圆周率

    在1995年，Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后，Bailey 和 Borwein 在他们的论文中发表了这一发现，这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • future

    ABAP开发者需关注的几大关键问题

    长期从事ABAP开发工作的专业人士，在面对行业新趋势时，往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法，以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • java

    二维码的实现与应用

    二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点，并详细描述了如何使用Java编程语言结合第三方库（如ZXing和qrcode.jar）来实现二维码的生成与解析。 ... [详细]
  • ip

    深入解析JQuery Mobile特有的事件与方法

    本文详细介绍了JQuery Mobile框架中特有的事件和方法，帮助开发者更好地理解和应用这些特性，提升移动Web开发的效率。 ... [详细]
  • java

    java语言基础数据类型：详解

    数据类型--char一、char1.1char占用2个字节char取值范围：【0~65535】char采用unicode编码方式char类型的字面量用单引号括起来char可以存储一 ... [详细]
  • random

    JavaScript进阶之旅：第三阶段深入探索

    在《JavaScript进阶之旅：第三阶段深入探索》中，我们将通过一系列复杂的代码示例，深入探讨JavaScript的高级特性与应用技巧。本阶段将重点讲解如何利用用户输入进行动态交互，例如通过提示框获取1到9之间的正整数，并基于此实现更多功能。此外，还将介绍如何优化代码结构，提升程序的可读性和维护性。 ... [详细]
author-avatar
KING逊咖
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有