模板字面量可以理解成是字符串的一种&＃xff0c;形式上用反引号 &＃96;&＃96; 将内容括起来。

目录

特点一&＃xff1a;模板字面量会保留反引号内部的空格、回车、tab,会将\n,\t翻译。

特点二&＃xff1a;支持字符串插值

特点三&＃xff1a;和标签函数搭配食用

特点一&＃xff1a;模板字面量会保留反引号内部的空格、回车、tab,会将\n,\t翻译。

        //展示保留空格、回车&＃xff0c;翻译\n

        let templateLiteral &＃61; &＃96;    当时共客长安。\n似二陆初来俱少年。&＃96;;

        console.log(templateLiteral);

结果

 可见 4个空格被保留&＃xff0c;\n被翻译。

顾名思义&＃xff0c;模板字面量在定义模板时特别有用&＃xff0c;比如

        //展示html模板

        let htmlTemplate &＃61; &＃96;

           

               

                    行步至春深

               

           

&＃96;;

        console.log(htmlTemplate);

控制台输出

当然&＃xff0c;如果想要保留\n,\t也是完全可以的~

只需调用String.raw函数

let templatedStr &＃61; &＃96;\t海绵宝宝和派大星永远是好朋友\n!&＃96;;

console.log(String.raw&＃96;\t海绵宝宝和派大星永远是好朋友\n!&＃96;);

控制台输出

特点二&＃xff1a;支持字符串插值

也就是可以直接在反引号内应用${}的格式把变量值取出来&＃xff0c;和其他内容合并成字符串(一对引号搞定拼接)

        //展示模板字面量支持字符串插值

        let subject &＃61; &＃39;knowledge&＃39;;

        let predicative &＃61; &＃39;power&＃39;;

        let interpolatedString &＃61; &＃96;${subject} is ${predicative} ~&＃96;;

        console.log(interpolatedString);

 控制台输出

而且${}内的值可以是自身

        //展示模板字面量支持字符串插值

        let subject &＃61; &＃39;knowledge&＃39;;

        let predicative &＃61; &＃39;power&＃39;;

        let interpolatedString &＃61; &＃96;${subject} is ${predicative} ~&＃96;;

        console.log(interpolatedString);

        interpolatedString &＃61; &＃96;Now I understand,${interpolatedString}&＃96;;

        console.log(interpolatedString);

 控制台输出

 ${}内还可以调用方法

        //展示模板字面量支持字符串插值&＃xff0c;并调用方法

        let begin &＃61; &＃39;now I understand,&＃39;;

        let interpolatedString &＃61; &＃96;${begin.toUpperCase()}what you said to me.&＃96;;

        console.log(interpolatedString);

 控制台输出

特点三&＃xff1a;和标签函数搭配食用

标签函数的特点&＃xff1a;

①接收的第一个参数是被插值分隔的字符串数组

比如

如果传入

&＃96;${a}&＃43;${b}&＃61;${a&＃43;b}&＃96;

函数的第一个实参是

[&＃39;&＃39;,&＃39;&＃43;&＃39;,&＃39;&＃61;&＃39;,&＃39;&＃39;]

这个字符串数组一共有4个元素&＃xff0c;依次为空字符串、加号、等号、空字符串。

可以看出&＃xff0c;对于有n个插值的模板字面量&＃xff0c;标签函数的第一个参数接收到的字符串数组的大小是n&＃43;1。

②接收的参数从第二个开始都是插值的实际值

③可以之间用函数名&＃43;模板字面量的形式调用

let name1 &＃61; &＃39;SpongeBob&＃39;;        

let name2 &＃61; &＃39;Patrick&＃39;;

let templatedStr &＃61; &＃96;${name1}和${name2}永远是好朋友&＃96;;

function tagFun(strArr,insert1,insert2){

    console.log(strArr);

    console.log(insert1);

    console.log(insert2);

}

tagFun&＃96;${name1}和${name2}永远是好朋友&＃96;;

控制台输出

 那么标签函数有什么用呢&＃xff1f;

例&＃xff1a;styled-components 就是通过 Tag 函数来给 React 和 ReactNative 设置 CSS 样式。

详见&＃xff1a;https://styled-components.com/

参考&＃xff1a;

1.《Javascript高级程序设计(第四版)》 Matt Frisbie

2. ES6 - 标签函数