JavaScriptで2つ以上の文字列を結合する3つの方法（+演算子・+=・concat()）

JavaScriptで2つ以上の文字列を結合する方法を、具体的なコード例とともにわかりやすく解説します。

JavaScriptには、2つ以上の文字列を結合するためのさまざまな方法があります。代表的なのは、プラス演算子 +、プラスイコール演算子 +=、そして concat() メソッドの3つです。

なお、+ と += は代入演算子と呼ばれます。

それでは、3つの方法をすべて実際に試してみましょう！

プラス演算子（+）

たとえば、firstName と lastName という2つの変数があり、その結合した値を fullName という3つ目の変数に代入したいとします。この場合、次のように書くことができます。

const firstName = "Steve"
const lastName = "Jobs"
const fullName = firstName + lastName

console.log(fullName) // SteveJobs

区切り（スペース）を入れる

fullName の文字列をもっと読みやすくするために、Steve と Jobs の間にスペースを入れてみましょう。先ほどのコードを使い回しますが、今回は + '' + の間に区切り文字を追加します。

const firstName = "Steve"
const lastName = "Jobs"
const fullName = firstName + " " + lastName

console.log(fullName) // Steve Jobs

注意："Steve " の後ろや " Jobs" の前に直接スペースを入れて区切りを追加することも可能ですが、プロジェクト内で firstName や lastName 変数を別の用途で再利用する際に、意図しないフォーマットの問題が発生する可能性があります。そのため、この方法はおすすめしません。

プラスイコール演算子（+=）

何らかの理由で新しい変数（fullName）を作りたくない場合は、プラスイコール演算子 += を使って、lastName の値を firstName に代入することができます。

console.log((firstName += lastName))
// SteveJobs

しかし、ご覧のとおり、ここでも区切りが必要になります。+= 演算子で複数の値を一度に追加しようとして、次のように書けると思うかもしれません。

firstName += " " += lastName

ところが、これを実行するとエラーが発生します。

Uncaught SyntaxError: Invalid left-hand side in assignment

正しくは、値の結合を別々の行に分けて行う必要があります。まずスペースの区切りを firstName に代入し、その後で lastName を firstName に代入しましょう。

let firstName = "Steve"
let lastName = "Jobs"

// 最初に区切り文字を代入
firstName += " "
// 次に姓を代入
firstName += lastName
// 結果：Steve Jobs

concat() メソッド

JavaScriptの concat() メソッドを使っても、文字列を結合することができます。

let firstName = "Steve"
let lastName = "Jobs"

const fullName = firstName.concat(lastName)

console.log(fullName)
// SteveJobs

ここでも同様に、区切りが必要になります。ただし concat() なら話は簡単です。文字列としてスペースをカンマで区切って引数に追加し、その後に lastName 変数を続けるだけです。

const fullName = firstName.concat(" ", lastName)
console.log(fullName)
// Steve Jobs

どの方法を使うべきか？

パフォーマンスの観点から、Mozilla をはじめとする多くの信頼できるJavaScript情報源は、可能な限り + または += を使用することを強く推奨しています。

JSPerfのテストケースが示すように、concat() のようなStringオブジェクトは、ブラウザ上で動作するJavaScriptインタプリタにとって、+ や += のような文字列プリミティブよりもはるかに処理が遅くなります。