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を使っていくと良さそうです。
コメント