3 лучших практических способа выполнения конкатенации строк в Javascript

Резюме: в этом уроке вы узнаете, как выполнять конкатенацию строк в JavaScript.

JavaScript предоставляет различные возможности, позволяющие объединять две или более строк:

• Использовать метод concat().
• использовать операторы + и +=
• Использовать шаблонные литералы

1) Использование метода concat()

Метод String.prototype.concat() объединяет два или более строковых аргумента и возвращает новую строку:

let newString = string.concat(...str);
Code language: JavaScript (javascript)

Метод concat() принимает различное количество строковых аргументов и возвращает новую строку, содержащую объединенные строковые аргументы.

Если в concat() передаются нестроковые аргументы, то перед конкатенацией эти аргументы преобразуются в строку. Например:

let racing = 'Formula ' + 1;
console.log(racing);
Code language: JavaScript (javascript)

Вывод:

Formula 1

Этот пример объединяет строки в новую строку:

let result = concat('JavaScript', ' ', 'String',' ', 'Concatenation');
console.log(result);
Code language: JavaScript (javascript)

Output:

JavaScript String Concatenation
Code language: JavaScript (javascript)

Следующий пример конкатенирует все строковые элементы массива в строку:

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

console.log(result);
Code language: JavaScript (javascript)

Вывод:

JavaScript String Concatenation
Code language: JavaScript (javascript)

2) Использование операторов + и +=

Оператор + позволяет объединить две строки. Например:

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

console.log(result);
Code language: JavaScript (javascript)

Вывод:

JavaScript String
Code language: JavaScript (javascript)

Чтобы составить строку по частям, используется оператор +=:

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

console.log(className);
Code language: JavaScript (javascript)

Вывод:

Согласно тесту производительности на некоторых современных веб-браузерах, операторы + и += работают быстрее, чем метод concat().

3) Использование шаблонных литералов

В ES6 появились шаблонные литералы, которые позволяют выполнять интерполяцию строк.

В следующем примере показано, как конкатенировать три строки:

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

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

console.log(className);
Code language: JavaScript (javascript)

Вывод:

navbar primary-color stickyBar
Code language: JavaScript (javascript)

В этом уроке вы узнали, как конкатенировать строки в JavaScript, используя метод concat(), оператор + и +=, а также шаблонные литералы.