ECMAScript/ES6模板文字

精华

小牛编辑

189浏览

2023-03-14

模板文字是ECMAScript 2015/ES6中引入的新功能。它提供了创建多行字符串和执行字符串插值的简便方法。模板文字是字符串文字，并允许嵌入表达式。

在ES6之前，模板文字被称为模板字符串。与字符串中的引号不同，模板文字用反引号(` )字符(QWERTY键盘中ESC键下方的键)括起来。模板文字可以包含占位符，由美元符号和大括号($(expression})表示。在反引号内，如果要使用表达式，则可以将该表达式放置在($(expression})中。

语法

var str = `string value`;

1.多行字符串

在普通字符串中，需要使用转义序列\n来换行以创建多行字符串。但是，在模板文字中，不需要使用\n，因为字符串仅在返回backtick(`)字符时结束。

我们可以通过以下示例来理解。

示例

// Without template literal   
console.log('Without template literal \n multiline string');   

// With template literal   
console.log(`Using template literal  
multiline string`);

运行结果如下：

Without template literal
 multiline string
Using template literal
multiline string

2.字符串插值

ES6模板文字支持字符串插值。模板文字可以使用占位符进行字符串替换。要使用普通字符串嵌入表达式，必须使用${}语法。

示例1

var name = 'World';  
var cname = 'XNTutor';  
console.log(`Hello, ${name}!  
Welcome to ${cname}`);

运行结果如下：

Hello, World!
Welcome to XNTutor

示例2

var x = 10;  
var y = 20;  
console.log(`The product of the variables ${x} and ${y} is:  
 ${x*y}`);

运行结果如下：

The product of the variables 10 and 20 is:
200

3.标记模板

标记模板是模板文字的更高级形式之一。带有标记的模板文字使我们能够使用函数来解析模板文字。
标签函数的第一个参数包含一个具有字符串值的数组，其余参数与表达式相关。带标记文字的编写与函数定义相似，但是当带标记文字被调用时会发生区别。调用文字不需要括号：()。

示例1

unction TaggedLiteral(str) {   
    console.log(str);   
}   

TaggedLiteral `Hello World`;

运行结果如下：

[ 'Hello World' ]

示例2

还可以在带标记的文字中传递值。该值可以是某些表达式的结果，也可以是从变量中获取的值。

function TaggedLiteral(str, val1, val2) {   
    console.log(str);   
    console.log(val1+"    "+val2);   
}   

let text = 'Hello World';   
TaggedLiteral`Colors ${text} ${10+30}`;

运行结果如下：

[ 'Colors ', ' ', '' ]
Hello World    40

4.原始字符串

模板文字原始方法允许在输入原始字符串时访问它们。除此之外，还存在用于创建原始字符串的string.raw()方法，类似于默认模板函数。它可以像在正则表达式文字中一样编写反斜杠。
string.raw()方法用于显示字符串，而无需任何反斜杠字符解释。打印Windows子目录位置而不需要使用大量的反斜杠也很有用。

示例

var rawText = String.raw`Hello \n World \n Welcome back! `   
console.log(rawText)

运行结果如下：

Hello \n World \n Welcome back!

5.String.fromCodePoint()

此方法返回一个字符串，该字符串是使用指定的Unicode代码点序列创建的。如果传递了无效的代码点，它将引发RangeError错误。

示例

console.log(String.fromCodePoint(49))          
console.log(String.fromCodePoint(80, 76))

运行结果如下：

1
PL