模板文字简介。

字符串操作是编程中非常常见的任务，尤其是在构建交互式 Web 应用程序时。如果您曾经花时间使用 JavaScript，那么您可能必须将一些变量放入字符串中。
在旧版本的 JavaScript 中，这意味着使用运算符通过称为 字符串连接 的过程将字符串连接在一起。然而，随着 JavaScript ES6(2015) 更新中引入 模板文字 。我们现在有一种更简洁的方法将变量插入字符串，称为 字符串插值.

什么是模板文字？

模板文字使我们能够更轻松地操作字符串。它们用反引号 (`) 而不是 (') 或 (") 括起来，并且它们通过使用 (${}) 语法将变量或函数调用直接放入字符串中来支持字符串插值。

这是模板文字如何简化字符串插值的示例。

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

使用模板文字的好处

1. 提高可读性

使用字符串连接时，很容易迷失在一堆符号中，尤其是在处理较长的字符串时。模板文字通过让您以更容易理解的方式编写字符串来避免这种情况。

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. 多行字符串

在模板文字之前，您必须使用 \n 等转义字符来生成多行字符串。现在你可以将它们写在反引号(`)中。

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. 表达式求值

您还可以执行计算、调用函数或操作字符串内的数据。

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

JavaScript 中的常见用例

1. HTML生成

您可以通过插值将变量直接放入字符串中，而不是通过连接构建 HTML 字符串。

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. 记录消息

您还可以将变量直接插入日志消息中，无需连接。

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. 创建 URL

模板文字也让构造 URL 变得更加容易。

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. 条件逻辑

另一个很好的用例是条件逻辑。通过模板文字，您可以使用三元运算符 (? :) 为字符串提供简单条件，这是 if-else 条件的简写。
逻辑运算符，如 &&（与）或 || (or) 也可用于向字符串添加条件部分。这消除了额外的 if-else 语句或连接的需要。

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

您还可以在模板文字中添加更复杂的表达式。

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

结论

JavaScript 中的模板文字提供了一种更清晰、更有效的方式来处理字符串插值。在构建 Web 内容、记录消息或创建更具可读性的代码之间，此方法提供了您所需的灵活性。

下次处理变量和字符串时，请尝试使用模板文字。您很快就会明白为什么它是我使用 JavaScript 的首选方法。

资源

1. MDN Web 文档 - 模板文字
2. GitHub - 第一阶段审查字符串实验室
3. W3 学校 - JavaScript 模板字符串