如何在 JavaScript 中进行字符串插值？

JavaScript 字符串插值是一个将表达式插入或放置到字符串中的过程。为了将此表达式插入或嵌入到字符串中，可以使用模板字面量。通过在 JavaScript 中使用字符串插值，还可以添加变量、数学表达式和计算结果等值。

模板字面量包含一个美元符号后跟花括号。在这个模板字面量的花括号内，应该编写要计算和嵌入的表达式或数学计算。

语法

JavaScript 字符串插值的语法如下所示。

`string where interpolation should be done enclosed in backticks: expression`

在 JavaScript 中，通过使用字符串插值，可以使用占位符动态地将输入插入到字符串的部分中。传统的将变量插入字符串的方法不支持动态插入输入的可能性。

示例 1

此示例演示如何使用模板字面量在 JavaScript 中进行字符串插值。

const name="Abdul Rawoof"
const company = "Tutorials Point"
let salary = 18000
let increment = 2000
let mail = '[email protected]'

console.log(`Employee name is ${name} and the company is ${company}
Salary of ${name} after increment is ${increment}:${salary+increment}
Contact details of ${name} is ${mail}`)

示例 1 的传统代码如下：

const name="Abdul Rawoof"
const company = "Tutorials Point"
let salary = 18000
let increment = 2000
let mail = '[email protected]'

console.log("Employee name is" +name + "and the company is" +company)
console.log("Salary of "+ name + "after increment "+ increment +" is "+(salary+increment))
console.log("Contact details of "+ name + "is "+mail)

以上代码是传统的方式，与示例 1 的代码相比，行数较多。传统方式下，控制台命令必须编写 3 次，但当使用反引号和占位符时，它只需编写一次控制台命令。这降低了代码复杂性，并且可以使用动态输入。

可以使用字符串插值来合并字符串、进行数学计算、使用三元运算符等。

示例 2

此示例演示了可以使用 JavaScript 字符串插值进行的一些操作。

const name1="Abdul"
const name2="Rawoof"
name = `${name1+name2}`
const company = "Tutorials Point"
let salary = 18000
let increment = 2000
let mail = '[email protected]'
let experience = 3
console.log("String Concate: Full name is",`${name1 + name2}`)
console.log("String Interpolation",`Employee name is ${name} and the company is ${company}`)
console.log("Using Ternary Operator",`Salary if increment is done based on experience ${experience > 2 ? 20000 : 18000}`)

更新于：2022年8月26日

17K+ 浏览量

启动你的职业生涯

通过完成课程获得认证

开始学习
广告