ES6 - 模板文字

模板文字(模板字符串)允许您使用字符串或字符串形式的嵌入式表达式。它们包含在反引号``中。例如，

const name = 'Jack';
console.log(`Hello ${name}!`);//Hello Jack!

注意:模板文字是在2015年引入的(也称为ECMAScript 6或ES6或ECMAScript 2015)。某些浏览器可能不支持模板文字的使用。访问 JavaScript模板文字支持了解更多信息。

模板文字

在早期版本的  JavaScript 中，您将对字符串使用单引号''或双引号"" 。例如，

const str1 = 'This is a string';

// 不能使用相同的引号
const str2 = 'A "quote" inside a string'; //valid code
const str3 = 'A 'quote' inside a string'; //Error

const str4 = "Another 'quote' inside a string";//valid code
const str5 = "Another "quote" inside a string";//Error

要在字符串中使用相同的引号，可以使用转义符\。

// 使用 \ 转义字符
const str3 = 'A \'quote\' inside a string'; //valid code
const str5 = "Another \"quote\" inside a string";//valid code

除了使用转义符，还可以使用模板文字。例如，

const str1 = `This is a string`;
const str2 = `This is a string with a 'quote' in it`;
const str3 = `This is a string with a "double quote" in it`;

如您所见，模板文字不仅使添加引号变得容易，而且使无涯教程的代码看起来更简洁。

多行字符串

模板文字也使编写多行字符串变得容易。例如，

使用模板文字，您可以替换

// 使用 + 运算符
const message1 = 'This is a long message\n' + 
'that spans across multiple lines\n' + 
'in the code.'

console.log(message1)

和

无涯教程网

const message1 = `This is a long message
that spans across multiple lines
in the code.`

console.log(message1)

这两个程序的输出将相同。

This is a long message
that spans across multiple lines
in the code.

表达式插值

在JavaScript ES6之前，您将使用 + 运算符将字符串中的变量和表达式连接起来。例如，

const name = 'Jack';
console.log('Hello ' + name);//Hello Jack

使用模板文字，将变量和表达式包含在字符串中要容易一些。为此，无涯教程使用 ${...} 语法。

const name = 'Jack';
console.log(`Hello ${name}`); 

// 与表达式一起使用的模板文字

const result = `The sum of  4 + 5 is ${4 + 5}`;
console.log(result); 

console.log(`${result < 10 ? 'Too low': 'Too low'}`)

输出

Hello Jack
The sum of  4 + 5 is 9
Very high

在模板文字内部分配变量和表达式的过程称为插值。

标记模板

通常，您将使用函数来传递参数。例如，

function tagExample(strings) {
    return strings;
}

// passing argument
const result = tagExample('Hello Jack');

console.log(result);

标记的模板的写法类似于函数定义。但是，在调用文字时，您不传递括号()。例如，

function tagExample(strings) {
    return strings;
}

// 创建标记模板
const result = tagExample`Hello Jack`;

console.log(result);

输出

["Hello Jack"]

字符串值数组作为标记函数的第一个参数传递。您还可以将值和表达式作为其余参数传递。例如，

const name = 'Jack';
const greet = true;

function tagExample(strings, nameValue) {
    let str0 = strings[0];//Hello
    let str1 = strings[1];//, How are you?

    if(greet) {
        return `${str0}${nameValue}${str1}`;
    }
}

// 创建标记文字
// 传递参数名称
const result = tagExample`Hello ${name}, How are you?`;

console.log(result);

输出

Hello Jack, How are you?

这样，您还可以在标记的模板中传递多个参数。