JavaScript模板字面量 (模板字符串)

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

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

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

字符串的模板字面量

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

const str1 = 'This is a string';

// cannot use the same quotes
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

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

// escape characters using \
const str3 = 'A \'quote\' inside a string';  // valid code
const str5 = "Another \"quote\" inside a string"; // valid code

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

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

如您所见，模板字面量不仅使添加引号变得容易，而且使我们的代码看起来更简洁。

使用模板字面量的多行字符串

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

使用模板字面量，您可以替换

// using the + operator
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之前，你可以使用+ 运算符来连接变量和表达式中的字符串。例如，

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

使用模板字面量，在字符串包含变量和表达式要容易一些。为此，我们使用${...}语法。

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

// template literals used with expressions

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

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

输出

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

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

标记模板

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

function tagExample(strings) {
    return strings;
}

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

console.log(result);

但是，您可以使用模板字面量创建带标签的模板(行为类似于函数 )。您可以使用允许使用函数解析模板字面量的标记。

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

function tagExample(strings) {
    return strings;
}

// creating tagged template
let result = tagExample`Hello Jack`;

console.log(result);

输出

["Hello Jack"]

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

let name = 'Jack';
let greet = true;

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

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

// creating tagged literal
// passing argument name
let result = tagExample`Hello ${name}, How are you?`;

console.log(result);

输出

Hello Jack, How are you?

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

在本教程中，您将在示例的帮助下了解JavaScript模板字面量 (模板字符串)。

字符串的模板字面量

使用模板字面量的多行字符串

表达式插值

标记模板