【学习笔记09】：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℃

4. 解决方法

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

    // 定义一个办理 模拟 数据库获取的当前温度的数据
    var temp = 30 ;

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

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

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

6.总结

总结：
1. 单引号和双引号不能嵌套自身
   如果非要写，使用转义符 \'  \"
	
2. 单引号和双引号不能换行
   如果非要写，使用转义符 \n
    
3. 单引号和双引号不能解析变量
   实际操作中，如果一定要解析变量，使用字符串拼接语法
	
   '字符串' + 变量
    变量 + '字符串'
   '字符串' + 变量 + '字符串'

	有字符串参与执行的是字符串拼接
	没有字符串参与执行加法运算

4. 单引号和双引号，不能运行js程序
   一定要运行，使用eval()执行字符串 
    
  '5+7' 是三个字符 没有运算功能
   eval( '5+7' ) 按照 5+7 运算字符结果是数值12

二、反引号

• 是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 ℃

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