As 3 principais maneiras práticas de realizar a concatenação de strings Javascript

Resumo : neste tutorial, você aprenderá como concatenar strings em JavaScript.

JavaScript oferece várias opções que permitem concatenar duas ou mais strings:

• Use o concat()método
• Use os operadores +e+=
• Use os literais do modelo

1) Usando o concat()método

O String.prototype.concat()concatena dois ou mais argumentos de string e retorna uma nova string:

let newString = string.concat(...str);Linguagem de código:  JavaScript  ( javascript )

O concat()aceita um número variado de argumentos de string e retorna uma nova string contendo os argumentos de string combinados.

Se você passar argumentos que não sejam de string para o concat(), ele converterá esses argumentos em uma string antes de concatenar. Por exemplo:

let racing = 'Formula ' + 1;
console.log(racing);Linguagem de código:  JavaScript  ( javascript )

Saída:

Formula 1

Este exemplo concatena strings em uma nova string:

let result = concat('JavaScript', ' ', 'String',' ', 'Concatenation');
console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript String ConcatenationLinguagem de código:  JavaScript  ( javascript )

O exemplo a seguir concatena todos os elementos de string de um array em uma string:

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

console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript String ConcatenationLinguagem de código:  JavaScript  ( javascript )

2) Usando os operadores + e +=

O operador +permite concatenar duas strings. Por exemplo:

let lang = 'JavaScript';
let result = lang + ' String';

console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

JavaScript StringLinguagem de código:  JavaScript  ( javascript )

Para compor uma corda pedaço por pedaço, você usa o +=operador:

let className = 'navbar';
className += ' primary-color';
className += ' sticky-bar';

console.log(className);
Linguagem de código:  JavaScript  ( javascript )

Saída:

De acordo com um teste de desempenho em alguns navegadores modernos, os operadores +e +=têm desempenho mais rápido que o concat()método.

3) Usando literais de modelo

ES6 apresenta os literais de modelo que permitem realizar interpolação de strings.

O exemplo a seguir mostra como concatenar três strings:

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

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

console.log(className);Linguagem de código:  JavaScript  ( javascript )

Saída:

navbar primary-color stickyBarLinguagem de código:  JavaScript  ( javascript )

Neste tutorial, você aprendeu como concatenar strings em JavaScript usando o concat()método, +o +=operador e os literais de modelo.