JavaScript文字列連結を行うための実践的な3つの方法

概要: このチュートリアルでは、JavaScriptで文字列を連結する方法を学習します。

JavaScriptは、2つ以上の文字列を連結できる様々なオプションを提供しています。

• concat()メソッドを使用する
• +および+=演算子を使用する
• テンプレートリテラルを使用する

1) concat()メソッドの使用

String.prototype.concat()は、2つ以上の文字列引数を連結し、新しい文字列を返します。

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)

出力

JavaScript String ConcatenationCode language: JavaScript (javascript)

次の例では、配列内のすべての文字列要素を1つの文字列に連結します。

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

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

出力

JavaScript String ConcatenationCode language: JavaScript (javascript)

2) +および+=演算子の使用

+演算子を使用すると、2つの文字列を連結できます。例:

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

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

出力

JavaScript StringCode language: JavaScript (javascript)

文字列を少しずつ構成するには、+=演算子を使用します。

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

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

出力

いくつかの最新のWebブラウザでのパフォーマンステストによると、+および+=演算子はconcat()メソッドよりも高速に動作します。

3) テンプレートリテラルの使用

ES6では、文字列補間を実行できるテンプレートリテラルが導入されました。

次の例は、3つの文字列を連結する方法を示しています。

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 stickyBarCode language: JavaScript (javascript)

このチュートリアルでは、concat()メソッド、+および+=演算子、およびテンプレートリテラルを使用して、JavaScriptで文字列を連結する方法を学習しました。