Comment construire/concaténer des chaînes en JavaScript ?

Question

JavaScript prend-il en charge le remplacement/l'interpolation ?

Vue d'ensemble

Je travaille sur un projet JavaScript et à mesure qu'il grandit, il devient de plus en plus difficile de garder les chaînes en bon état. J'aimerais savoir quelle est la manière la plus simple et la plus traditionnelle de construire ou de construire une chaîne en JavaScript.

Mon expérience jusqu'à présent :

À mesure que les projets deviennent plus complexes, la concaténation de chaînes commence à paraître moche et devient plus difficile à maintenir.

La chose la plus importante à ce stade est la simplicité et la lisibilité. Pensez à un ensemble de pièces mobiles, pas seulement à 2 ou 3 variables.

Tout aussi important, il est actuellement pris en charge par les principaux navigateurs (c'est-à-dire au moins ES5).

Je connais l'abréviation de la connexion JavaScript :

var x = 'Bonjour';
var y = 'monde';
console.log(x + ', ' + y);

Il existe également la fonction String.concat.

Je cherche quelque chose de plus propre.

Ruby et Swift le font d'une manière intéressante.

Ruby

var x = 'Bonjour'
var y = 'monde'
imprimer "#{x}, #{y}"

Swift

var x = "Bonjour"
var y = "monde"
println("(x), (y)")

Je pensais qu'il pourrait y avoir quelque chose de similaire en JavaScript, peut-être quelque chose comme sprintf.js.

Question

Est-ce possible sans bibliothèque tierce ? Si non, que puis-je utiliser ?

Answer 1

Je suis déçu que personne dans les autres réponses n'explique « la meilleure façon » comme signifiant « la manière la plus rapide »...

J'ai tiré deux exemples de ici et ajouté str。 join() 和 str.reduce() de la réponse de nishanths ci-dessus. Voici mes résultats sur Firefox 77.0.1 sous Linux.

---

Remarque : J'ai découvert en les testant que si je mets str = str.concat() 和 str += directement avant ou après l'autre, le second fonctionnait toujours un peu mieux... j'ai donc effectué ces tests individuellement et commenté les autres Résultat...

Même ainsi , si je les relance, leurs vitesses changent beaucoup , j'ai donc mesuré chacun 3 fois.

1 personnage à la fois :

• 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 cordes à la fois :

• 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 字符串

---

Donc, que ce soit en ajoutant 1 caractère à la fois ou 26 chaînes à la fois :

• Gagnant clair : en gros, une égalité entre str = str.concat() 和 str +=
• Perdant évident : [].reduce()，然后是 [].join()

---

Mon code, facile à exécuter dans la console du navigateur :

{
  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 2

Avec ES6, vous pouvez utiliser

• Chaîne de modèle : p>

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

Versions ES5 et inférieures :

• Utilisez +opérateur

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

• chaîne de concat (..)

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

Ou utilisez la méthode du tableau :

• join( ..) :

  var username = 'craig';
  var joined = ['hello', username].join(' ');

• Ou de manière plus exotique, réduire(..) combiné avec l'un des éléments ci-dessus :

  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