JavaScriptで文字列を結合(連結)する4つの方法!

JavaScript

JavaScriptで文字列を結合する方法について書いています。
実際に文字列を結合するときには、下記の4つの方法があります。

・プラス演算子「+」を使う
・配列のjoinメソッドを使う
・文字列のconcatメソッドを使う
・テンプレートリテラルを使う

プラス演算子を使って結合する

プラス演算子「+」を使うことで、文字列を結合することができます。
例えば、下記のように使用します。

let grape = "ぶどう"
grape = grape + "は美味しい!"
console.log(grape) // ぶどうは美味しい!

最初にgrape変数に”ぶどう”という文字列を設定しています。
そのあとにgrape変数に対して、文字列の”は美味しい!”を結合するようにしました。

プラス演算子を使って結合したあとに、もう一度grape変数に代入しています。
その結果、出力すると「ぶどうは美味しい!」が出力されます。

結合の順序に気をつけよう

数値を結合する時には順序に気をつけたいです。
例えば、単純に数値と文字列だと、文字列として出力できます。

let grape = "ぶどうは"
grape = grape + 100 + "円です。" 
console.log(grape) // ぶどうは100円です。

上記では、文字列の「ぶどうは」と数値の100と文字列の「円です。」を結合しました。
こうすると、結果は「ぶどうは100円です。」になります。
これは予想がつくかと思います。

ですが、下記のように値段の箇所に数値を入れます。

let grape = "ぶどうは"
grape = grape + 200 + 100 + "円です。" 
console.log(grape) // ぶどうは200100円です。

これは200と100が足されそうですが、出力結果は「ぶどうは200100円です。」となります。
文字列が数値より先に来ている場合は、その後の数値が文字列となって結合されてしまいます。

先ほどの200と100を足したい場合には、丸括弧を使うと良いです。
優先順位が上がって、先に足されます。

このように、丸括弧で数値をくくってあげると、先に計算されます。

let grape = "ぶどうは"
grape = grape + (200 + 100) + "円です。" 
console.log(grape) // ぶどうは300円です。

結果として「ぶどうは300円です。」が出力されます。

このように、数値が先にある場合は問題ありません。

let ssd = 128 + 128 + "ギガバイトのSSDです。"
console.log(ssd) // 256ギガバイトのSSDです。

上記だと、数値の128と128を先に足してから、文字列を結合しています。
結果として「256ギガバイトのSSDです。」が出力されます。

このように思ってない挙動をすることがあるので、プラス演算子(+)を使うときには順序に気をつけましょう。

配列のjoinメソッドを使って結合する

次にjoinメソッドを使ってみます。
joinは配列から呼び出すことが可能です。

例えば、下記のように使います。

let grapeTexts = ["ぶどうは", 100, "円です"]
let text = grapeTexts.join("")
console.log(text) // ぶどうは100円です

grapeTexts配列に、文字列で結合したい要素を3つ入れています。
text変数にgrapeTexts.join("")の結果を入れています。

grapeTexts.join("")とすることで、配列の要素が文字列として結合されます。
結果、結合された「ぶどうは100円です」が出力されます。

joinメソッドに引数を渡さない場合

joinメソッドに引数を渡さない場合には、カンマが結合された文字列に入ります。
先ほどのコードのjoinメソッドの引数を渡さないようにします。

let grapeTexts = ["ぶどうは", 100, "円です"]
let text = grapeTexts.join()
console.log(text) // ぶどうは,100,円です

そうすると、カンマで結合された「ぶどうは,100,円です」が返ってきます。
joinメソッドの引数に渡すのは、要素の区切り文字です。
そのまま結合したい場合は、先ほどのコードのように空文字(“”)を渡すと良いです。

joinメソッドに別の引数を渡すと?

joinメソッドには、渡した文字列で結合されます。
例えば、下記のように”-“を使います。

let grapeTexts = ["ぶどうは", 100, "円です"]
let text = grapeTexts.join("-")
console.log(text) // ぶどうは-100-円です

そうすると、結果は”-“で結合されて「ぶどうは-100-円です」となります。

concatメソッドを使って結合する

文字列からconcatメソッドを使って、結合することもできます。
例えば、このように使います。

let grape = "ぶどう"
grape = grape.concat("は美味しい!")
console.log(grape) // ぶどうは美味しい!

grape変数の文字列からconcatを呼び出して、引数に”は美味しい!”を渡しています。
結果として「ぶどうは美味しい!」が出力されます。

concatメソッドに複数の引数を渡す

concatメソッドには引数を複数渡すことが可能です。
そうすると、渡した全てが結合された文字列になります。

let grape = "ぶどう"
grape = grape.concat("は", 100, "円", "でした!")
console.log(grape) // ぶどうは100円でした!

“ぶどう”を入れたgrape変数にconcatを使用して、4つの要素を渡しました。
100は数値ですが、ちゃんと結合されて、結果「ぶどうは100円でした!」が出力されます。

変数の文字列をテンプレートで結合する

最後にテンプレートリテラルを使用して結合します。
テンプレートリテラルは下記のように使います。

let grape = "ぶどう"
grape = `${grape}は美味しい!`
console.log(grape) // ぶどうは美味しい!

grape変数に”ぶどう”を入れています。
バッククォート(`)を使って、囲んだ箇所に変数と文字列を入れています。

変数や数値はドル波括弧の「${」から「}」の間に指定します。
指定した内容が文字列として展開されます。
結果として「${grape}は美味しい!」は「ぶどうは美味しい!」として出力されます。

数値を入れる

数値を入れる場合は、下記のようにします。

let grape = "ぶどうは"
grape = `${grape}${200 + 100}円です。` 
console.log(grape) // ぶどうは300円です。

先にドル波括弧の中身が、計算されて展開されます。
そのため上記の結果は「ぶどうは300円です。」となります。

終わりに

今回はJavaScriptでの文字列の結合について書きました。
単純に文字列を結合するだけなら、プラス演算子を使うよりもテンプレートリテラルを使う方が見やすく、数値の足し間違えなども起こらないので良いかと思います。
配列を使用する時にはjoinを使っていくと良さそうです。

コメント

タイトルとURLをコピーしました