JavaScript 将变量插入字符串
本文将介绍如何在 JavaScript 中将变量插入字符串。
模板文字的概念在 JavaScript 中已经存在了一段时间。它们以前被称为模板字符串。ES6 中引入了模板文字
。与必须使用繁琐的字符串连接相比,它提供了一种将变量嵌入给定句子中的简便方法。代替使用引号(双引号或单引号),我们使用带反引号(键盘上的`字符)定义的模板文字。我们将字符串放在反引号中,并将变量嵌入句子中。以下是模板文字的用法。
仅将字符串本身包含在一组反引号中就可以使其成为字符串值。它具有与在双引号"
中保留字符串文本相同的功能。以下示例代码描述了用作模板文字的简单字符串。
输出:
Hello World
我们已经准备好正常的字符串。如果必须在此字符串中显示变量的值,则需要嵌入变量。嵌入时,我们将变量用大括号括起来,并在其前加上 $
符号。嵌入变量值的语法是 ${variableName}
。以下代码段将 eggCount
变量嵌入到普通字符串中,而整个内容都封装在反引号中。
let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);
输出:
On easter we decorted 20 easter eggs
与带有模板文字的纯字符串连接不同,我们可以包含具有多个变量的表达式,类似于使用模板文字在 JavaScript 中进行编码。如果我们需要执行某些操作,例如求和,获取子字符串(包括日期)等,则可以将所有这些功能以及更多功能嵌入带有模板文字的字符串中。下面的代码集有很多用例。
let a = 5; b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);
输出:
Sum of 5 and 10 is 15
另一个涉及日期的示例如下。在这里,我们不使用任何变量,但是模板文字中包含的表达式本身可以工作。它是带有 javascript 的字符串,继续使用双引号或反引号,就像我们连接句子时一样:
console.log(`The date today is ${new Date().getDate()}-${new Date().getMonth() + 1}-${new Date().getFullYear()}`);
输出:
The date today is 7-4-2021
将变量值整齐地插入字符串的另一种方法是使用 JavaScript 支持的基本格式。使用 JavaScript console.log()
,我们可以避免串联并在目标字符串中添加占位符。如下所示,将要分配的值作为参数传递。
let a = 5; b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a+b));
输出:
Sum of 5 and 10 is 15.
变量到值的这种解析仅与 console.log()
一起使用。因此,我们不能将其用于分配给其他变量,也不能将其用于在 HTML UI 中显示新的已解析字符串。
let op1 = 5, op2 = 10, operation = "Sum";
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
输出:
Sum of 5 and 10 is 15.
如果我们忘记考虑传递的参数类型,则可能是类型不匹配。JavaScript 会尝试对变量进行类型转换,并将结果值添加到字符串中。下面的代码解释了这种现象。
let op1 = 5, op2 = 10, operation = "Sum";
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);
输出:
5 of 10 and 15 is NaN.
op1
是 Number 数据类型,我们正在使用%s
将其注入到最终字符串中。%s
会自动将数字类型转换为字符串数据类型。这种转换进行得很顺利。但是对于 operation
变量,该值将分配给该序列中紧随其后的占位符。该占位符为%d
。因此,此处将字符串数据类型转换为数字。转换不会发生。因此,返回的结果是 NaN
,我们将其视为输出的结尾字。
我们可以在参数中使用表达式,就像在 (op1 + op2)
中看到的那样。JavaScript 理解并相应地将其解析为总和。
在这种情况下,如果不使用转义字符,则不能在最终字符串中使用双引号。但是,如果将整个结构封装在双引号中,则可以使用单引号。请看以下代码。
let op1 = 5, op2 = 10, operation = "Sum";
console.log("'%s' of %d and %d is %d.", operation, op1, op2, (op1 + op2));
输出:
'Sum' of 5 and 10 is 15.
在 JavaScript ES6 中的模板文字
之前,开发社区遵循了功能丰富的 sprintf.js
库。该库有一个称为 sprintf()
的方法。sprintf.js
是 JavaScript 的开源库。它具有适用于 Node.js
和浏览器的实现。sprintf()
用于在字符串中包含变量,而不使用字符串串联。用法如下。
let sprintf = require('sprintf-js').sprintf;
let op1 = 5, op2 = 10, operation = "Sum";
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));
输出:
Sum of 5 and 10 is 15.
如果要在字符串中包含变量值而不使用+
和双引号来进行繁琐的字符串连接,则最好的选择是使用带有反引号的功能模板文字
。如果我们仅需要出于记录目的而在输出字符串中插入值,JavaScript 的 console.log()
函数就很有用。它具有默认情况下包括的格式设置选项。sprintf.js
库具有丰富的功能,并在空间中起着主导作用,因为它在嵌入变量值时比模板文字提供了更多的功能。但这是以熟悉该库为代价的。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。