JavaScript 中的字符串插值

字符串插值是一个很棒的编程语言特性，它允许将变量、函数调用、算术表达式直接注入到字符串中。在 ES6 之前的 JavaScript 中没有字符串插值。字符串插值是 ES6 的一个新特性，它可以在不需要转义字符的情况下制作多行字符串。我们可以轻松地使用撇号和引号，它们可以使我们的字符串，因此我们的代码也更容易阅读。这些是在字符串连接上使用字符串插值的一些原因。

让我们看看字符串连接和字符串插值之间的区别。

  
// String Concatenation
function myInfo(fname, lname, country) {
    return "My name is " + fname + " " + lname + ". " 
              + country + " is my favorite country."; 
}
console.log(myInfo("john", "doe", "India"));

输出：

My name is john doe. India is my favorite country

在字符串连接中，很难维护字符串，因为它们变得越来越大，变得乏味和复杂。为了使其可读，开发人员必须维护所有空格。这就是 ES6 通过字符串插值来拯救的地方。在 JavaScript 中，模板字面量（用反引号 ` ` 包裹的字符串）和 ${expression} 作为占位符执行字符串插值。现在我们可以在 myInfo函数上方编写字符串插值。

  
// String Interpolation
function myInfo(fname, lname, country) {
    return `My name is ${fname} ${lname}. ${country} is my favorite country`; 
}
console.log(myInfo("john", "doe", "India"));

输出：

My name is john doe. India is my favorite country

我们可以看到与串联相比，代码很小且易于阅读。模板字符串支持占位符。变量、函数调用、算术等表达式可以放在占位符内。这些表达式在运行时被计算并且输出被插入到字符串中。

  
// DEclare and initialize variables
const x = "GeeksforGeeks";
  
// I like GeeksforGeeks
console.log(`I like ${x}.`);
  
// Function call
function greet() {
    return "hello!";
}
  
// hello! I am a student.
console.log(`${greet()} I am a student.`); 
  
// Expression evolution
//sum of 5 and 6 is 11. 
console.log(`sum of 5 and 6 is ${5+6}.`);
  

输出：

I like GeeksforGeeks
hello! I am a student.
sum of 5 and 6 is 11.

我们还可以在表达式中使用条件语句。例如：

  
function isEven(x) {
    console.log(`x is ${x%2 === 0 ? 'even' : 'odd'}`);
}
  
isEven(4); // x is even

输出：

x is even

字符串插值是一个很棒的功能。它有助于将值插入字符串字面量。它使代码更具可读性并避免笨拙。