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

2025年2月15日 | 阅读 4 分钟

本文解释了插值，并展示了如何将其应用于字符串以提高其抗拉强度。此外，您还将了解如何操作字符串插值以改进编程代码。最后，您将看到几个代码示例，演示如何使用 JavaScript 字符串进行插值以获取事实。

JavaScript 插值简介

编程语言的一个巨大优势是字符串插值，它允许将变量、函数调用和数学运算符直接注入到字符串中。在 ES6 之前，JavaScript 没有字符串插值。ES6 的一项新功能是字符串插值，它允许您在不使用转义字符的情况下创建多行字符串。撇号和引号易于使用，这有助于使我们的字符串和代码更易于阅读。选择字符串插值而非字符串连接的一些理由。

JavaScript 中的字符串插值

JavaScript 中的模板字面量允许您将值附加到字符串。这是一个美元符号，后面跟着两个花括号。您希望嵌入其值的表达式应包含在花括号中。

使用模板字面量而不是连接将值嵌入到字符串中。使用反引号 ("") 而不是引号来封装您的字符串，以声明模板字面量。

语法

包含在反引号中的字符串，其中进行了插值：表达式`

在 JavaScript 中，占位符允许通过字符串插值将输入动态插入到字符串片段中。将变量附加到字符串的传统方法不支持此可能性。查看下面的语法

下面的表达式声明了模板字面量。

短语“5 + 6”被评估为该表达式的结果。这是因为我们的表达式在完整停止之前就被输入了。

示例

以下示例显示了 JavaScript 字符串插值。

示例 1

以下示例显示了基本的 JavaScript 字符串插值。我们可以在插值中使用表达式替换。加法和数学运算可以与字符串插值函数一起使用。

 
<!DOCTYPE html>
<html>
<head>
<title> How to do string interpolation in JavaScript? </title>
</head>
<body style = "background-color:beige;">
<h2> How to do string interpolation in JavaScript? </h2>
<h4> Basic javascript string interpolation with the expression substitution </h4>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
let basic_var = `Addition Value: ${9+19}`;
document.getElementById("data_view").innerHTML = basic_var;
let price_var = 20;
let VAT_var = 0.25;
let total_var = `Total Value: ${(price_var * (1 + VAT_var)).toFixed(2)}`;
document.getElementById("data_view1").innerHTML = total_var;
</script>
</body>
</html>   

输出

输出显示了 JavaScript 插值。

How to Do String Interpolation in JavaScript?

示例 2

以下示例显示了基本的 JavaScript 字符串插值。我们可以在插值中使用字符串替换。字符串和算术运算符可以在 JavaScript 的插值函数中使用。

 
<!DOCTYPE html>
<html>
<head>
<title> How to do string interpolation in JavaScript? </title>
</head>
<body style = "background-color:beige;">
<h2> How to do string interpolation in JavaScript? </h2>
<h4> Basic javascript string interpolation </h4>
<b id = "data_view1"> </b>
<script>
const name = "Ram Verma";
const company  = "javaTPoint";
let salary = 8000;
let increment = 2100;
let mail = 'abdul@gmail.com';
let total_var = `Employee name is ${name} and the company is ${company}
Salary of ${name} after increment is ${increment}:${salary+increment}
Contact details of ${name} is ${mail}`;
document.getElementById("data_view1").innerHTML = total_var;
</script>
</body>
</html>   

输出

输出显示了 JavaScript 插值。

示例 3

以下示例显示了基本的 JavaScript 字符串插值。我们可以创建一个数组并在字符串中使用插值来显示值。

 
<!DOCTYPE html>
<html>
<head>
<title> How to do string interpolation in JavaScript? </title>
</head>
<body style = "background-color:beige;">
<h2> How to do string interpolation in JavaScript? </h2>
<h4> Basic javascript string interpolation </h4>
<b id = "data_view1"> </b>
<script>
let header_var = "JavaScript Strings Interpolation";
let tags_var = ["HTML", "javascript", "es6", "Jquery"];
let html_var = `<h2>${header_var}</h2><ul>`;
for (const x of tags_var) {
html_var += `<li>${x}</li>`;
}
html_var += `</ul>`;
document.getElementById("data_view1").innerHTML = html_var;
</script>
</body>
</html>   

输出

输出显示了 JavaScript 插值。

示例 4

以下示例显示了基本的 JavaScript 字符串插值。我们可以创建一个 JavaScript 函数并在字符串插值中使用它来操作功能。

 
<!DOCTYPE html>
<html>
<head>
<title> How to do string interpolation in JavaScript? </title>
</head>
<body style = "background-color:beige;">
<h2> How to do string interpolation in JavaScript? </h2>
<h4> Basic javascript string interpolation with the functions </h4>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<br>
<b id = "data_view2"> </b>
<script>
// javascript String Interpolation
function myData(first_name, last_name, country_name) {
return `My name is ${first_name} ${last_name}. ${country_name} is my favorite country`;
}
document.getElementById("data_view").innerHTML = myData("Ram", "doe");
document.getElementById("data_view1").innerHTML = myData("Shyam", "Sharma", "India");
//create a basic function and use string interpolation
function greet() {
return "Hello Developers!";
}
document.getElementById("data_view2").innerHTML = `${greet()} I am a computer science student.`;
</script>
</body>
</html>   

输出

输出显示了 JavaScript 插值。

示例 5

以下示例显示了基本的 JavaScript 字符串插值。如果将条件应用于带有逻辑和数学运算的函数，则字符串将显示输出。

 
<!DOCTYPE html>
<html>
<head>
<title> How to do string interpolation in JavaScript? </title>
</head>
<body style = "background-color:beige;">
<h2> How to do string interpolation in JavaScript? </h2>
<h4> Basic javascript string interpolation with the functional condition </h4>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
// javascript String Interpolation
function isOddEven(x) {
document.getElementById("data_view").innerHTML = `x is ${x%2 === 0 ? 'even' : 'odd'}`;
document.getElementById("data_view1").innerHTML = `x is ${x > 3 ? 'Greater than 3': 'Less than 3'}`;
}
isOddEven(5); // x is odd
</script>
</body>
</html>   

输出

输出显示了 JavaScript 插值。

结论

字符串插值有助于直接操作功能和运算符。它可以同时处理数据、输出数据和操作数据。它有助于快速轻松地开发应用程序。

下一主题如何使用 JavaScript 复制数组

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

JavaScript 插值简介

JavaScript 中的字符串插值

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

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

JavaScript 插值简介

JavaScript 中的字符串插值

语法

示例

结论

相关帖子

JavaScript 计时器

Localecompare 在 JavaScript 中的用法

JavaScript in 运算符

Lambda 表达式在 JavaScript 中的用法

Discord Bot in JavaScript

JavaScript 通知

在 JavaScript 中计算当前周数

JavaScript label 语句

JavaScript 中的二维数组

在 Safari 中启用 JavaScript

订阅 Tpoint Tech

联系信息