JavaScript 文字列を結合するサンプル

JavaScriptの文字列を結合するサンプルです。

目次

文字列 +演算子で結合する
  代入演算子で結合する(+=)
  文字列を連結する(concat)
  文字列を繰り返す(repeat)
  改行を含んだ文字列
  テンプレート文字列

+演算子で結合する

文字列 + 文字列

+演算子で結合するサンプルです。

<script>

console.log("あいう" + "えお"); // あいうえお

console.log("あいう" + 123); // あいう123

</script>

3行目は、+演算子で文字列同士を結合しています。
5行目のように文字列と数値を結合することができます。

代入演算子で結合する(+=)

変数 += 文字列

代入演算子で結合するサンプルです。

<script>

let a = "かきく";
a += "けこ";

console.log( a ); // かきくけこ

</script>

4行目は、代入演算子(+=)で文字列を結合しています。

文字列を連結する(concat)

str.concat(string2[, string3, ..., stringN])

concatメソッドで、文字列を結合するサンプルです。concatは連結という意味です。

<script>

const a = "赤";
const b = "青";

console.log(a.concat(b)); // 赤青
console.log(a.concat("と",b)); //赤と青
console.log(a.concat("と",b,"です。")); //赤と青です。

</script>

concatメソッドは、引き数を増やすことができ、増やした分結合されます。

以下は、MDNのconcatメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat

文字列を繰り返す(repeat)

str.repeat(count)

文字列を繰り返すサンプルです。

<script>

const a = "あ";
console.log(a.repeat(2)); // ああ

const b = "あいう";
console.log(b.repeat(2)); // あいうあいう

</script>

7行目のように複数の文字もまとめて繰り返します。

以下は、MDNのrepeatメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

改行を含んだ文字列

`文字列`

改行を含んだ文字列のサンプルです。ECMAScript 2015からです。

<script>

var a = `こんにちは
はじめまして`;

alert(a);

</script>

3,4行目は、改行がある文字列をバックコーテションで囲んでいます。エラーになりません。
6行目のアラートでは、改行されて表示されます。

テンプレート文字列

`文字列${変数}文字列`
  • 文字列をバックコーテーション(`)で括ります。
  • バックコーテーションで括った中で、${変数}と書くことにより変数を展開できます。

テンプレート文字列のサンプルです。

<script>

const a = "赤";
console.log(`色は${a}です。`); // 色は赤です。

const b = 1;
const c = 2;

console.log(`1+2は ${b + c}です。`); // 1+2は 3です。

</script>

4行目は、3行目の変数を文字列内で結合して表示しています。
9行目のように、${ }内で計算もできます。

以下は、MDNのテンプレート文字列のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

関連の記事

JavaScript substring 文字列の一部を取得する

△上に戻る