ES6模板字面量

📌 相关文章

📜 ES6模板字面量

📅 最后修改于: 2021-01-01 04:07:52 🧑 作者: Mango

模板字面量是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 = 'javaTpoint';
console.log(`Hello, ${name}!
Welcome to ${cname}`);

输出量

Hello, World!
Welcome to javaTpoint

让我们看一下字符串插值的另一个示例。

示例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 World    40

原始字符串

模板字面量原始方法允许在输入原始字符串访问它们。除此之外，还存在用于创建原始字符串的字符串.raw()方法，类似于默认模板函数。它允许我们像在正则表达式字面量一样写反斜杠。

字符串.raw()方法用于显示字符串，而无需任何反斜杠字符解释。printWindows子目录位置而不需要使用大量的反斜杠也很有用。

例

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

输出量

Hello \n World \n Welcome back!

String.fromCodePoint()

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

例

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

输出量

1
PL