模板文字是ECMAScript 2015/ES6中引入的新功能。它提供了创建多行字符串和执行字符串插值的简便方法。模板文字是字符串文字,并允许嵌入表达式。
在ES6之前,模板文字被称为模板字符串。 与字符串中的引号不同,模板文字用反引号(`
)字符(QWERTY键盘中ESC键下方的键)括起来。 模板文字可以包含占位符,由美元符号和大括号($(expression})
表示。在反引号内,如果要使用表达式,则可以将该表达式放置在($(expression})
中。
语法
var str = `string value`;
在普通字符串中,需要使用转义序列\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
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
标记模板是模板文字的更高级形式之一。 带有标记的模板文字使我们能够使用函数来解析模板文字。
标签函数的第一个参数包含一个具有字符串值的数组,其余参数与表达式相关。 带标记文字的编写与函数定义相似,但是当带标记文字被调用时会发生区别。 调用文字不需要括号:()
。
示例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
模板文字原始方法允许在输入原始字符串时访问它们。 除此之外,还存在用于创建原始字符串的string.raw()
方法,类似于默认模板函数。 它可以像在正则表达式文字中一样编写反斜杠。string.raw()
方法用于显示字符串,而无需任何反斜杠字符解释。 打印Windows子目录位置而不需要使用大量的反斜杠也很有用。
示例
var rawText = String.raw`Hello \n World \n Welcome back! ` console.log(rawText)
运行结果如下:
Hello \n World \n Welcome back!
此方法返回一个字符串,该字符串是使用指定的Unicode代码点序列创建的。 如果传递了无效的代码点,它将引发RangeError
错误。
示例
console.log(String.fromCodePoint(49)) console.log(String.fromCodePoint(80, 76))
运行结果如下:
1 PL