ES6模板字面量介绍和用法

本文概述

多行字符串
字符串插值
标记模板
原始字符串
String.fromCodePoint()

模板文字是ECMAScript 2015 / ES6中引入的新功能。它提供了创建多行字符串和执行字符串插值的简便方法。模板文字是字符串文字, 并允许嵌入表达式。
在ES6之前, 模板文字被称为模板字符串。与字符串中的引号不同, 模板文字用反引号(`)字符(QWERTY键盘中ESC键下方的键)括起来。模板文字可以包含占位符, 由美元符号和大括号($(expression})表示。在反引号内, 如果要使用表达式, 则可以将该表达式放置在($(expression})中。
语法

var str = `string value`;

多行字符串在普通字符串中, 我们必须使用转义序列\ n来换行以创建多行字符串。但是, 在模板文字中, 不需要使用\ n, 因为字符串仅在返回backtick(`)字符时结束。
【ES6模板字面量介绍和用法】让我们尝试通过以下示例来理解它。
例子

// Without template literal console.log('Without template literal \n multiline string'); // With template literal console.log(`Using template literalmultiline string`);

输出如下

Without template literal multiline stringUsing template literalmultiline string

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

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

输出如下

Hello, World!Welcome to srcmini

让我们看一下字符串插值的另一个示例。
示例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

function 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 World40

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