JavaScript中如何构建/连接字符串?
P粉513316221
2023-08-27 19:01:23
<p>JavaScript 支持替换/插值吗?</p>
<h3>概述</h3>
<hr />
<p>我正在开发一个 JavaScript 项目,随着它变得越来越大,保持字符串良好的状态变得越来越困难。我想知道在 JavaScript 中构造或构建字符串的最简单和最传统的方法是什么。</p>
<p>到目前为止我的经验:</p>
<blockquote>
<p>随着项目变得更加复杂,字符串连接开始看起来很丑陋并且变得更难维护。</p>
</blockquote>
<p>此时最重要的是简洁性和可读性,考虑一堆移动部件,而不仅仅是 2-3 个变量。</p>
<p>同样重要的是,它目前已得到主要浏览器的支持(即至少支持 ES5)。</p>
<p>我知道 JavaScript 连接简写:</p>
<pre class="brush:php;toolbar:false;">var x = 'Hello';
var y = 'world';
console.log(x + ', ' + y);</pre>
<p>还有 String.concat 函数。</p>
<p>我正在寻找更简洁的东西。</p>
<p>Ruby 和 Swift 以一种有趣的方式做到了这一点。</p>
<p><strong>红宝石</strong></p>
<pre class="brush:php;toolbar:false;">var x = 'Hello'
var y = 'world'
print "#{x}, #{y}"</pre>
<p><strong>斯威夫特</strong></p>
<pre class="brush:php;toolbar:false;">var x = "Hello"
var y = "world"
println("(x), (y)")</pre>
<p>我想 JavaScript 中可能有类似的东西,也许类似于 sprintf.js。</p>
<h3>问题</h3>
<hr />
<p>可以在没有第三方库的情况下完成此操作吗?如果没有,我可以用什么?</p>
令我失望的是,其他答案中没有人将“最佳方式”解释为“最快方式”......
我从此处提取了两个示例,并添加了
str。 join()
和str.reduce()
来自上面 nishanths 的回答。以下是我在 Linux 上的 Firefox 77.0.1 上的结果。注意:我在测试这些时发现,如果我将
str = str.concat()
和str +=
直接放在之前或之后彼此之间,第二个总是表现得更好一些...所以我单独运行这些测试并评论其他测试的结果...即使如此,如果我重新运行它们,它们的速度也会很大变化,所以我每个都测量了 3 次。
一次 1 个字符:
str = str.concat()
:841、439、956 毫秒 / 1e7 concat() 的
............str +=
:949、1130、664 毫秒 / 1e7 +='s
.......[].join()
:[] 中有 3350, 2911, 3522 ms / 1e7 个字符
......[].reduce()
:[] 中的 3954、4228、4547 毫秒 / 1e7 个字符
一次 26 个字符串:
str = str.concat()
:444、744、479 毫秒 / 1e7 concat() 的
............str +=
:1037, 473, 875 毫秒 / 1e7 +='s
........[].join()
:2693, 3394, 3457 ms / 1e7 字符串在 []
......[].reduce()
:[] 中的 2782、2770、4520 ms / 1e7 字符串
所以,无论是一次附加1个字符还是一次附加26个字符串:
str = str.concat()
和str +=
之间的平局[].reduce()
,然后是[].join()
我的代码,易于在浏览器控制台中运行:
使用ES6,你可以使用
模板字符串: p>
ES5 及以下版本:
使用
+
运算符字符串的
concat (..)
或者,使用数组方法:
join( ..)
:或者更奇特,reduce(..) 与上述任何一项组合: