gorogoronyan FC2

JavaScript: 文字列を連結する

概略

文字列を連結には下のような方法があります。

  1. + 演算子で文字列を連結する。
  2. テンプレートリテラルで連結する。
  3. 配列 Array の join() 関数で連結する。

+ 演算子で文字列を連結する

文字列同士を + でつなぐと文字列の連結になります。

例:
let s = "あいう" + "ABC";  //結果 "あいうABC"

文字列の連結は数値の足し算とは異なる点に注意してください。 また、変数に 1) 数値が入っているか、2) 文字列が入っているか？ の違いは常に意識してください。

プログラムでも 1) 数値の足し算のコードと 2) 文字列の連結のコードが 混在すると見づらくなるのが欠点です。ということで、 文字列の連結では下で説明するテンプレートリテラルが新たに追加されました。

テンプレートリテラルで連結する

グレイヴ・アクセント ` で囲った文字列を テンプレートリテラル と呼びます。 テンプレートリテラルは IE では使用できない機能でしたが 現在では使用できます。

テンプレートリテラルを使うと文字列を + で連結した書き方が 不要になり混乱しません。

let v1 =  8;
let v2 =  2;

// + 演算子で文字列を連結して出力する
//文字列を + で連結した書き方はごちゃごちゃしやすい欠点がある。

let s = v1 + " + " + v2 + " = " + (v1 + v2);

//テンプレートリテラルで出力する

let s = `${v1} + ${v2} = ${v1 + v2}`;

配列 Array.join("") で連結する

配列 Array の要素に文字列をセットして Array.join("") で連結する。
JavaScript: 配列と連想配列

//例: 配列のオブジェクトを作る。
const array = [];

//配列に文字列を追加する。
array.push("テキスト1");
array.push("テキスト2");
array.push("テキスト3");

//配列の文字列を連結する。
const s = array.join("");  //結果は "テキスト1テキスト2テキスト3" になる。

連結のときの区切り文字を指定する

Array.join() の引数に区切り文字を指定すると 間に区切り文字を入れて連結されます。

array.join()      引数なしの場合は "," と同じです。
array.join(",")   カンマ区切りの文字列になる。
array.join("")    区切り文字をなし (空文字) にして連結する。
array.join(" ")   スペース区切りの文字列になる。
array.join("\t")  タブ区切りの文字列になる。
array.join("\n")  改行して連結する。

2重配列を文字列に変換する

いろいろ

ソースコードの文字列が複数行にまたがる場合

テキストデータを JavaScript の文字列のコードに入れる場合は、 ES2015 リテラル `文字列` を使うのが簡単です。

下のコードは文法エラーになります

//文法エラー。"" で記述された文字列が複数行に分かれている。
let s = "文字列1
文字列2
文字列3
文字列4";

書き方

1つの文字列を複数行に分けて書きたい場合、 下のような書き方があります。

//こちらは文法エラーになりません。文字列を + で連結する。
let s = "文字列1"
+ "文字列2"
+ "文字列3"
+ "文字列4";

上のコードはエラーになりませんが書くのが面倒です。 ES2015 リテラルで記述すると簡単になります。

//こちらは文法エラーなりません。改行コードも反映されます。
let s = `
文字列1
文字列2
文字列3
文字列4
`;

//上と同じ
let s = "\n文字列1\n文字列2\n文字列3\n文字列4\n";

その他

文字連結の処理時間

関連

inserted by FC2 system