TL; DR

Question

TL; DR

JavaScript是否支持替换/插值？

概述

我正在研究一个JS项目，随着它越来越大，保持良好的字符串变得越来越难。我想知道在JavaScript中构造或构建字符串的最简单和最常规的方法是什么。

到目前为止我的经历：

字符串连接看起来很难看，随着项目变得越来越复杂，变得越来越难以维护。

此时最重要的是简洁性和可读性，想想一堆活动部分，而不仅仅是2-3个变量。

同样重要的是，它支持主流浏览器（至少支持ES5）。

我知道JS连接的简写：

var x = 'Hello';
var y = 'world';
console.log(x + ', ' + y);

String.concat函数。

我正在寻找一些更整洁的东西。

Ruby和Swift以一种有趣的方式做到了。

红宝石

var x = 'Hello'
var y = 'world'
print "#{x}, #{y}"

夫特

var x = "Hello"
var y = "world"
println("\(x), \(y)")

我在想，JavaScript中可能有类似sprintf.js的东西。

问题

这可以在没有任何第三方库的情况下完成吗？如果没有，我可以使用什么？

Answer 1

使用ES6，您可以使用

Template strings：

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

ES5及以下：

使用+运算符

var username = 'craig';
var joined = 'hello ' + username;

字符串＆＃39; 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

Answer 2

npm update -g some_module

更多：https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en

Answer 3

我很失望，没有其他答案将“最佳方式”解释为“最快方式” ...

我从here中提取了两个示例，并从上方的nishanths's answer中添加了str.join()和str.reduce()。这是我在Linux上的Firefox 77.0.1上获得的结果。

注意：我在测试这些代码时发现，如果将str = str.concat()和str +=放在彼此的正前方或正后，第二个总会更好。。因此，我分别运行了这些测试，并为结果注释了其他测试...

即使是，如果我重新运行它们，它们的速度也会在广泛范围内变化，所以我每次测量了3次。

一次

1个字符：

str = str.concat()：841, 439, 956 ms / 1e7 concat()'s
............str +=：949, 1130, 664 ms / 1e7 +='s
.........[].join()：3350, 2911, 3522 ms / 1e7 characters in []
.......[].reduce()：3954, 4228, 4547 ms / 1e7 characters in []

一次

26个字符串：

str = str.concat()：444, 744, 479 ms / 1e7 concat()'s
............str +=：1037, 473, 875 ms / 1e7 +='s
.........[].join()：2693, 3394, 3457 ms / 1e7 strings in []
.......[].reduce()：2782, 2770, 4520 ms / 1e7 strings in []

因此，无论是一次添加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';
}

Answer 4

我认为 replace（）值得一提。

在某些情况下，替换方法可以在构建字符串时为您提供良好的服务。具体来说，显然，当您将动态部分注入其他静态字符串时。例如：

var s = 'I am {0} today!';
var result = s.replace('{0}', 'hungry');
// result: 'I am hungry today!'

要替换的占位符显然可以是任何东西。我使用“{0}”，“{1}”等来自C＃的习惯。它只需要足够独特，不要出现在字符串以外的地方。

所以，如果我们可以稍微调整一下字符串部分，OPs示例也可以像这样解决：

var x = 'Hello {0}';
var y = 'World';
var result = x.replace('{0}', y);
// result: 'Hello World'. -Oh the magic of computing!

“替换”参考： https://www.w3schools.com/jsreF/jsref_replace.asp

Answer 5

您可以使用""" Name. Describe what this script does Usage: name <firstarg> name --countdown name sillycommand <SILLYNESS> name -h | --help Options: --countdown display a count down """功能。

concat

Answer 6

您可以使用Coffeescript，使javascript代码更简洁。对于字符串连接，您可以执行以下操作：

first_name = "Marty"
full_name = "#{first_name} McFly"
console.log full_name

也许你可以开始here看看coffescript提供的内容..

Answer 7

**Top 3 Practical Ways to Perform Javascript String Concatenation**

1) Using the concat() method

let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result = ''.concat(...list);

console.log(result);

Output:
JavaScript String Concatenation

2) Using the + and += operators

    enter code here

The operator + allows you to concatenate two strings. 
For example:
let lang = 'JavaScript';
let result = lang + ' String';


console.log(result);
Output: JavaScript String


3) Using template literals`enter code here`

ES6 introduces the template literals that allow you to perform string interpolation.
The following example shows how to concatenate three strings:

let navbarClass = 'navbar';
let primaryColor = 'primary-color';
let stickyClass = 'sticky-bar';

let className = `${navbarClass} ${primaryColor} ${stickyClass}`;

console.log(className);

Output: navbar primary-color stickyBar

在JavaScript中进行字符串构建/连接的最佳方法是什么？

TL; DR

概述

问题

7 个答案: