迹忆客 专注技术分享

JavaScript 有一个很好的功能，叫做字符串插值，可以直接在字符串中注入一个变量、一个函数调用和一个算术表达式。

在本文中，我们将介绍如何进行字符串插值。下面我们会有代码示例，大家可以在机器上运行。

在 ES6 发布之前，JavaScript 中没有字符串插值功能。由于缺乏这一功能，导致了字符串连接代码，如下图所示。

const generalInformation = (firstName, lastName, Country) => {
    return "First Name " + firstName + " Last Name: " + lastName + ". " 
              + Country + " is my country.";  
} 
console.log(generalInformation("Mark", "John", "US")); 

输出：

First Name Mark Last Name: John. US is my country.

字符串插值是一个允许你直接将变量、函数调用和算术表达式注入到字符串中的功能，而不需要对多行字符串使用连词或转义字符。

在字符串插值中，我们使用回标来表示模板字元，并使用格式–${ourValue} 来插入变量、函数调用和算术表达式等动态值。

const generalInformation = (firstName, lastName, Country) => {
    return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} 
console.log(generalInformation("Mark", "John", "US")); 

输出：

First Name: Mark Last Name: John. Country: US

我们现在知道了字符串内插是一个多么神奇的功能。

让我们注入一个函数调用和一个算术表达式。

const generalInformation = (firstName, lastName, Country) => {
    return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} 
console.log(generalInformation("Mark", "John", "US")); 

console.log(`${generalInformation("Mark", "John", "US")} He is a Worker in our company.`);  

console.log(`sum of 10 and 6 is ${10+6}.`); 

输出：

First Name: Mark Last Name: John. Country: US
First Name: Mark Last Name: John. Country: US He is a Worker in our company.
sum of 10 and 6 is 16.

我们可以在字符串插值中使用条件语句。

const isEvenOrOdd = (num) => {
    console.log(`Number is ${num%2 === 0 ? 'even' : 'odd'}`); 
} 
isEvenOrOdd(5);
isEvenOrOdd(8);

输出：

Number is odd
Number is even