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

特点一：模板字面量会保留反引号内部的空格、回车、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 模板字面量的常见用法相关推荐

JavaScript模板字面量（Template literals）介绍
JavaScript模板字面量(Template literals)介绍模板字面量(Template literals)是什么? 简单地说,是允许嵌入表达式的字符串字面量.在反引号中可以直接使用单引 ...
JS模板字面量标签函数
定义标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果. 标签函数本身是一个常规函数,通过前缀到模板字面量来应用自定义行为. 标签函数接收到的参数依次是原始字符串数组和对每个表达式求值 ...
【精讲】Javascript模板字面量
文章目录模板字面量是什么? 将模板字面量传入函数(带标签的模板字符串) 第一个参数其他参数如何将模板字面量输出为完整字符串呢? 模板字面量是什么? 模板字面量,是允许嵌入表达式的字符串字面量. ...
模板字面量（模板字符串）
模板字面量是创建字符串的新字面量语法,使用反引号(`)来分界.有三种特性: 插值,多行和标记. 插值使用占位符${expression} 将动态值放入创建的字符串中. let name = &quo ...
工作84：模板字面量
JS：关于JS字面量及其容易忽略的12个小问题
简要问题1:不能使用typeof判断一个null对象的数据类型问题2:用双等号判断两个一样的变量,可能返回false 问题3:对于非十进制,如果超出了数值范围,则会报错问题4:JS浮点数并不精确 ...
js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
php字面量,浅谈js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
字面量方式和new方式的区别及用法
一 - 字面量方式和new方式 ☛每次创建数组或对象的时候,都能用以下两种方法创建:咦?有什么区别呢?还有哪些可以有这两种方法呢?我到底用哪一种呢? var arr = [];//字面量方法创建数组 ...

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

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

特点二：支持字符串插值

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

ECMAScript 6 模板字面量的常见用法相关推荐

最新文章

热门文章