文字列の連結(JavaScript)

TOP
コラム
文字列の連結(JavaScript)

JavaScript(js)とは

まず初めに、名前が似ていますが、JavaとJavaScriptは全くの別物です。
Javaの利用分野はさまざまな大規模システムです。例えば、SNSなどのWeb関連サービスやAndroidのスマホ向けアプリなどがあります。
一方JavaScriptの利用分野は、Webブラウザ上で動くシステムやサービスなど、Webサイトのページ制作です。また、ページの再読み込みなしで新しいコンテンツを読み込んでくれたり、Twitterなどでは再読み込みなしでサーバーに投稿することができます。簡単に書くと、WEBページの動作、WEBアプリ開発、スマホアプリ開発、ゲーム開発などが基本となります。
ちなみに「js」というのは「JavaScript」のことです。

文字列を連結させる

例えば「あいう」と「えお」をくっつけたい時、皆さんはどのようにしていますか。
一番に、プログラミング言語の学習を始めて初めのころに習得する「+」演算子を思い浮かべる方が多いのではないでしょうか。「+」演算子は計算をする時の足し算や単項演算子としても使われていますが、文字列に使用すると文字列と文字列を連結することができます。
では、「100」と「10」をくっつけて「10010」にしたい時はどうすればいいでしょうか。
それでは詳しく学習していきましょう。

文字列を連結させる方法①

◎「+」演算子を使う方法。

◇文字列 + 文字列
console.log("あいう" + "えお");　　　　　(⇦ 「あいうえお」になる)

◇文字列 + 数値
console.log("あいう" + 100 + 10); 　　　　(⇦ 「あいう10010」になる。「あいう110」ではない)

◇数値 + 文字列
console.log(100 + 10 + "円"); 　　　　　　(⇦ 「110円」になる)

◇数値 + 数値
console.log(100 + 10); 　　　　　　　　　(⇦ 「110」になる)

◇文字列(数字) + 文字列(数字)
console.log("100" + "10"); 　　　　　　　(⇦ 「10010」になる)

ついでに、変数と文字列を連結させる方法もあるので紹介しておきます。

　var example = 'ダミー'
　var result = 'こんにちは。' + '私は' + example + 'です。';
　　console.log( result );

　実行結果　…　こんにちは。私はダミーです。

このように文字列を代入した変数と文字列を連結することができます。例えばexampleのところを、入力された文字を受け取るようにしておけば、「こんにちは。◯◯さん」のように出力することもできます。ゲームやwebで占いをするときなどに見かけることもあるでしょう。

文字列を連結させる方法②

◎join()による文字列連結方法
join() 関数は、配列やオブジェクトに格納された各要素を繋げて1つの文字列に連結する場合に使用します。
構文は　配列.join(連結文字)　です。

　var example = ["こんにちは。", "私は", "元気です。"];
　var result = example.join(””);　　　　　　　　(⇦ 「""」を指定することで隙間なく文字列が連結される)
　　console.log( result );

　実行結果　…　こんにちは。私は元気です。

理解しやすいように、もう一つ例を挙げておきます。

　var example = ['2020', '09', '15'];
　var result = example.join('/');
　　console.log( result );

　実行結果　…　2020/09/15

文字列を連結させる方法③

◎concat()による文字列連結方法
concat()は呼び出し元の配列の後ろに、引数で指定した配列を追加し2つの配列を結合する方法です。concat()は引き数を増やし、増やした分結合されます。
構文は　str.concat(string2[, string3, ...])　です。

　var example1 = "こんにちは。";
　var example2 = "今日は寒い";

　　console.log(example1.concat(example2));
　　console.log(example1.concat("なんだか",example2));
　　console.log(example1.concat("なんだか",example2,"ですね。"));

　実行結果　…　こんにちは。今日は寒い
　　　　　　　　こんにちは。なんだか今日は寒い
　　　　　　　　こんにちは。なんだか今日は寒いですね。

　var animal1 = ['イヌ', 'ネコ'];
　var animal2 = ['サル', 'タヌキ'];
　var result = animal1.concat(animal2);

　　console.log(result);

　実行結果　…　イヌ,ネコ,サル,タヌキ

文字列を連結させる方法④

◎repeat()による文字を繰り返す方法
repeat()は引数に繰り返し回数を指定することで、文字列を繰り返すことができるメソッドです。
構文は　str.repeat(count)　です。

　var example = "あいう";
　var result = example.repeat(2);
　　console.log( result );

　実行結果　…　あいうあいう

repeat(2) の部分を、var result = example + example と書いても同じ結果を得ることはできます。今回は2回だけなので問題はありませんが、回数が増えてくると「example」という長い変数の打ち間違いや回数の数え間違いなどのエラーが出る可能性が高くなります。なので、repeat()を使うようにしましょう！

最後に…

JavaScriptの文字列の連結方法について説明してきました。様々な連結方法がある中で、「＋」演算子を用いて文字列と数値を連結する場合は「型」に注意しましょう。文字列や数値の連結はよく使用することになりますので、しっかり学習していきましょう。