【JavaScript】文字列の連結には順序に気を付ける

もくじ

文字列の扱い

文字列の扱いについては過去に記事にしたんですが、その際に順序には言及していなかったので改めてまとめます。

bonoponz.hatenablog.com

+で連結

連結順によって結果が変わる

const text = '文字列';
const num1 = 10;
const num2 = 23;

console.log(text + num1);
> "文字列10"
console.log(num1 + num2);
> 33
console.log(text + num1 + num2);
> "文字列1023"
console.log(num1 + num2 + text);
> "33文字列"

string型があるとそのあとの型も文字列として認識されるようです。

console.log(text + num1 + num2);
> "文字列1023"

これはtextがstring型であるために、続くnum1とnum2もstring型として連結された結果になります。

console.log(num1 + num2 + text);
> "33文字列"

これはまずnumber型で計算がされたあとstring型があるのでそのまま連結された形ですね。

テンプレートリテラル

変数を含む文字列の連結はテンプレートリテラルを使った方がいいです。

let old = 10;
let young = 6;
console.log(`兄弟の年齢はあわせて${old + young}歳です。`);
> "兄弟の年齢はあわせて16歳です。"

参考URL

テンプレートリテラル (テンプレート文字列) - JavaScript | MDN