ECMAScript 6 模板字面量的常见用法

Posted CSU迦叶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ECMAScript 6 模板字面量的常见用法相关的知识,希望对你有一定的参考价值。

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

目录

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

特点二:支持字符串插值

特点三:和标签函数搭配食用


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

        //展示保留空格、回车,翻译\\n

        let templateLiteral = `    当时共客长安。\\n似二陆初来俱少年。`;

        console.log(templateLiteral);

结果

 可见 4个空格被保留,\\n被翻译。

顾名思义,模板字面量在定义模板时特别有用,比如

        //展示html模板

        let htmlTemplate = `

            <div>

                <a href='#'>

                    <span>行步至春深</span>

                </a>

            </div>`;

        console.log(htmlTemplate);

控制台输出

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

只需调用String.raw函数

let templatedStr = `\\t海绵宝宝和派大星永远是好朋友\\n!`;

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

控制台输出

 

 

特点二:支持字符串插值

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

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

        let subject = 'knowledge';

        let predicative = 'power';

        let interpolatedString = `${subject} is ${predicative} ~`;

        console.log(interpolatedString);

 控制台输出

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

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

        let subject = 'knowledge';

        let predicative = 'power';

        let interpolatedString = `${subject} is ${predicative} ~`;

        console.log(interpolatedString);

        interpolatedString = `Now I understand,${interpolatedString}`;

        console.log(interpolatedString);

 控制台输出

 ${}内还可以调用方法

        //展示模板字面量支持字符串插值,并调用方法

        let begin = 'now I understand,';

        let interpolatedString = `${begin.toUpperCase()}what you said to me.`;

        console.log(interpolatedString);

 控制台输出

特点三:和标签函数搭配食用

标签函数的特点:

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

比如

如果传入

`${a}+${b}=${a+b}`

函数的第一个实参是

['','+','=','']

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

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

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

③可以之间用函数名+模板字面量的形式调用

let name1 = 'SpongeBob';        

let name2 = 'Patrick';

let templatedStr = `${name1}和${name2}永远是好朋友`;

function tagFun(strArr,insert1,insert2){

    console.log(strArr);

    console.log(insert1);

    console.log(insert2);

}

tagFun`${name1}和${name2}永远是好朋友`;

控制台输出

 那么标签函数有什么用呢?

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

详见:https://styled-components.com/

参考:

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

2. ES6 - 标签函数 

以上是关于ECMAScript 6 模板字面量的常见用法的主要内容,如果未能解决你的问题,请参考以下文章

ES6模板字面量

ES6模板字面量

第5章 技巧性基础:5.4 原始数组和字符串字面量的模板

js高级

ECMAScript 6 学习笔记

js内存