JavaScript中如何构建/连接字符串?
P粉513316221
P粉513316221 2023-08-27 19:01:23
0
2
521
<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>
P粉513316221
P粉513316221

全部回复(2)
P粉244730625

令我失望的是,其他答案中没有人将“最佳方式”解释为“最快方式”......

我从此处提取了两个示例,并添加了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()

我的代码,易于在浏览器控制台中运行:

{
  console.clear();

  let concatMe = 'a';
  //let concatMe = 'abcdefghijklmnopqrstuvwxyz';

  //[].join()
  {
    s = performance.now();
    let str = '', sArr = [];
    for (let i = 1e7; i > 0; --i) {
      sArr[i] = concatMe;
    }
    str = sArr.join('');
    e = performance.now();
    console.log(e - s);
    console.log('[].join(): ' + str);
  }

  //str +=
  {
    s = performance.now();
    let str = '';
    for (let i = 1e7; i > 0; --i) {
      str += concatMe;
    }
    e = performance.now();
    console.log(e - s);
    console.log('str +=: ' + str);
  }

  //[].reduce()
  {
    s = performance.now();
    let str = '', sArr = [];
    for (let i = 1e7; i > 0; --i) {
      sArr[i] = concatMe;
    }
    str = sArr.reduce(function(pre, next) {
      return pre + next;
    });
    e = performance.now();
    console.log(e - s);
    console.log('[].reduce(): ' + str);
  }

  //str = str.concat()
  {
    s = performance.now();
    let str = '';
    for (let i = 1e7; i > 0; --i) {
      str = str.concat(concatMe);
    }
    e = performance.now();
    console.log(e - s);
    console.log('str = str.concat(): ' + str);
  }

  'Done';
}
P粉412533525

使用ES6,你可以使用

  • 模板字符串: p>

    var username = 'craig';
    console.log(`hello ${username}`);

ES5 及以下版本:

  • 使用+运算符

    var username = 'craig';
    var joined = 'hello ' + username;
  • 字符串的 concat (..)

    var username = 'craig';
    var joined = 'hello '.concat(username);

或者,使用数组方法:

  • join( ..)

    var username = 'craig';
    var joined = ['hello', username].join(' ');
  • 或者更奇特,reduce(..) 与上述任何一项组合:

    var a = ['hello', 'world', 'and', 'the', 'milky', 'way'];
    var b = a.reduce(function(pre, next) {
      return pre + ' ' + next;
    });
    console.log(b); // hello world and the milky way
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板