JavaScript单引号、双引号和反引号(模板字符串)的区别

一、单引号、双引号

1. 单引号、双引号不能包裹/嵌套自身

• 单引号中不能有单引号，双引号中不能有双引号
• 符号的配对原则执行的是就近原则
• 如果一定要在单引号、双引号中嵌套自身，必须要使用JavaScript转义符，避免符号之间的冲突
• JavaScript转义符，作用目的和html的字符实体是一样的效果，都是为了避免符号冲突

---

• 常见的转义符
  • \' --- '
  • \" --- "
  • \ --- \
  • \n --- 换行

    // JavaScript中可以使用转义符避免符号冲突
    console.log("贵阳  \'今天天气\'   有点热");
    console.log('贵阳  \"今天天气\"   有点热');
  

  

2. 单引号、双引号中内容不能换行

  // 单引号、双引号中不能换行
    console.log( "贵阳
    今天天气有点热" );     //报错
​
  // 可以使用\n执行换行效果
    console.log( "贵阳 \n今天天气\n 有点热" );

3. 单引号、双引号中不支持解析变量

   // 定义一个变量 模拟数据库获取的当前温度的数据
    var temp = 30 ;
    
   // 单引号和双引号中写入的变量不能解析
    document.write( '贵阳当前气温是 temp℃ ' );   //贵阳当前气温是 temp℃
    document.write( "贵阳当前气温是 temp℃ " );   //贵阳当前气温是 temp℃

• 解决方法

  • 将字符串和变量使用 + 加号拼接
    • JavaScript程序会解析变量中存储的数据，使用变量中存储的数据和字符串一起拼接，生成新的字符串内容

      // 定义当前温度
      var temp = 30 ;
  ​
      // 使用字符串拼接语法 引引加加
      document.write( "贵阳当前气温是" + temp + "℃" );  //贵阳当前气温是30℃
  

4. 使用eval()来运行执行字符串

• eval()会将字符串内容 按照js程序功能来执行

      // 将单引号中5+7三个字符 按照JavaScript程序5+7表达式来运行
      console.log( eval( '5 + 7' )   );
  

5.总结

1. 单引号和双引号不能嵌套自身；如果非要写，使用转义符 \' 、\"
2. 单引号和双引号不能换行；如果非要写，使用转义符 \n
3. 单引号和双引号不能解析变量实际操作中，如果一定要解析变量，使用字符串拼接语法
   • '字符串' + 变量
   • 变量 + '字符串'
   • '字符串' + 变量 + '字符串'
     • 有字符串参与执行的是字符串拼接; 没有字符串参与执行加法运算. ​
4. 单引号和双引号，不能运行js程序;一定要运行，使用eval()执行字符串

二、反引号(模板字符串)

• 是ES6新增的语法形式，反引号语法又称为模板字符串
• 内容中支持换行，支持解析变量
• 反引号中，使用${ }包裹变量可以解析变量
• 模板字符串 使用 ${ } 还可以运算JavaScript表达式

1、支持换行

    // 反引号 支持 换行
    console.log( `贵阳
有什么好吃的
吗?` );

2、支持解析变量

      // 反引号中解析变量
      var temp = 31;

      // 直接定义变量不能解析变量
      console.log(`贵阳当前气温是 temp ℃`); //贵阳当前气温是 temp ℃

      // 将变量使用 ${} 包裹模板字符串,会自动解析变量中存储的数据
      // 将解析的数据，拼接在字符串中

      console.log(`贵阳当前气温是 ${temp} ℃`); //贵阳当前气温是 31 ℃

      // 可以解析运算表达式,将 5+7 的运算结果 12
      // 解析到字符串中
      console.log(`贵阳当前气温是 ${5 + 7} ℃`); //贵阳当前气温是 12 ℃

• 如果没有变量需要解析，推荐使用单引号双引号，执行效率更高