JS中的模板字符串(ES6新增)

末蓝、 2022-03-01 08:08 676阅读 0赞

## 模板字符串(template strings) ##

ES6引入了一种新的字符串字面量语法，特点如下：

> 使用反引号\`包围字符串(常规是用单引号`'`或双引号`"`)。  
> 字符串中可直接换行等操作(无需转义字符)。  
> 字符串中可以`${varName}`的格式(称为模板占位符)获取变量值  
> 返回值统一为string类型。  
> `${varName}`或`${value}`。即`${}`中可为变量名，也可直接为字面量值(如`${123}或${asd}`)。

一般用于减少转义字符，或减少字符串拼接符。

## 应用 ##

### 多行字符串(减少转义字符) ###

var text = `Hello
    世界
    		你好
    `;
    console.log(text);

输出为：

Hello
    世界
    		你好

### 字符串拼接(减少字符串拼接符`+`) ###

如果要对多个变量的值进行字符串拼接，要使用的`+`数量会非常的多。  
使用模板字符串就会少些很多代码并减少语法错误。

var a = "蜜";
    var b = "探";
    var text = `秘密的${a}, 探案的${b}`;
    console.log(text);		// 秘密的蜜, 探案的探

## 标签模板(`Tag Template`) ##

标签模板是一个函数的调用，其中调用的参数是模板字符串。  
当模板字符串中带有变量，会将模板字符串参数处理成多个参数。

alert(`hello world`);
    alert`hello world`;   // 等效

**console.log`参数串`**  
若参数串中有`${varName}`，则这些取值点会将参数串分割为字符串数组(字符串个数为取值点个数+1)。  
并将各个取值点的值也传入函数。

若参数中无`${varName}`，则传入的参数为字符串数组：`[参数串]`。  
即：**console.log`hello`等效于console.log(\[“hello”\])**  
若参数中穿插着`${varName}`，则传入的参数为字符串数组:`[字符串,...] value1...`  
如：**console.log`he{1}ll{2}o`相当于console.log(\[“he”, “ll”, “0”\], 1, 2)**。  
代码：

console.log`hello`		// ["hello", raw: Array(1)]
    console.log(["hello"])	// ["hello"]
    
    console.log`he${1}llo`			// ["he", "llo", raw: Array(2)] 1
    console.log(["he", "llo"], 1)	// ["he", "llo"] 1
    
    console.log`he${1}ll${"asd"}o`				// ["he", "ll", "o", raw: Array(3)] 1 "asd"
    console.log(["he", "ll", "o"], 1, "asd")	// ["he", "ll", "o"] 1 "asd"

![Tag Template][]

[Tag Template]: /images/20220301/ce75430e22b74026adce4db026440d7f.png