JavaScriptで文字列を結合するならBabelを使用したほうが良い

javascript-string-concat-use-babel

文字列は連結しにくい

JavaScriptの文字列は「'」、「"」、変数などが混ざると連結しにくい。

実例を出すとこんな感じ。

var color = 'red';
var fruit = 'apple';
var suffix = '!!';
var str = 'Mike\'s ' + fruit + ' is "' + color + '"' + suffix;
console.log(str);
// => Mike's apple is "red"!!

Babel(ES2015)なら「`」で囲めば+記号を使用せずにこのように書ける。

var color = 'red';
var fruit = 'apple';
var suffix = '!!';
var str = `Mike's ${fruit} is "${color}"${suffix}`;
console.log(str);
// => Mike's apple is "red"!!

Babel Try it outを使用

Babel Try it outを利用すればブラウザからES2015を現在一般的に使用できるJavaScriptに簡単に変換できる。

Babel Sample 1

ただしHTMLタグを含む文字列の連結に使用すると改行が\nに変換されコードの可読性が低下するため注意が必要。

Babel Sample 2