ES6教程

ES6 模板文字

ES6 模板字面量

模板字面量是 ECMAScript 2015/ES6 中引入的一项新功能。它提供了一种创建多行字符串和执行字符串插值的简单方法。模板文字是字符串文字并允许嵌入表达式。
在 ES6 之前,模板文字被称为模板字符串。与字符串中的引号不同,模板文字由 反引号(` `) 字符(QWERTY 键盘中 ESC 键下方的键)括起来。模板文字可以包含占位符,由美元符号和大括号($(expression}) 表示。在反引号内,如果我们想使用一个表达式,那么我们可以将该表达式放在($(expression}).
语法
var str = `string value`;

多行字符串

在普通字符串中,我们必须使用转义序列\n 来为创建多行字符串提供一个新行。但是,在模板字面量中,没有必要使用\n ,因为字符串只有在获得反引号(`) 字符时才结束。
让我们试着用下面的例子来理解它。
例子
// 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 = 'lidihuo';
console.log(`Hello, ${name}!
Welcome to ${cname}`);
输出
Hello, World!
Welcome to lidihuo
让我们看另一个字符串插值的例子。
Example-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' ]
Example-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!

String.fromCodePoint()

此方法返回一个字符串,该字符串是使用指定的 Unicode 代码点序列创建的。如果传递了无效的代码点,它会抛出一个RangeError。
示例
console.log(String.fromCodePoint(49))        
console.log(String.fromCodePoint(80, 76))
输出
1
PL
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4