【初心者向け】JavaScriptの文字列の基本的な処理方法について解説！

こんにちは、大学院でIT系の研究を専攻している、ひらりんです。

JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！

本記事では、JavaScriptの文字列の処理方法について説明します。プログラムにおいて、ある文字列を検索し、決まった文字での分割や結合をすることが必要な時がありますよね。しかし、他のプログラミング言語とのやり方が違ったり、他のメソッドと混同しちゃうこともあります。

JavaScriptの文字列の処理方法について、結合や分割など基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！

1 JavaScriptの文字列について
2 JavaScriptの主な文字列操作方法
3 まとめ

JavaScriptの文字列について

プログラミングでは、文字が並んでいることを文字列と呼んでいます。表示したいことや代入したい文字列をそのまま、プログラムに書けばよいのですが、プログラミングは、”数値”か”文字列”かなどといった区別をさせる必要があります。「これは文字列です」と指定するための宣言文は、プログラム言語によって異なります。JavaScriptでは、“var”や”let”を用いて宣言します！

// varを用いて文字列を宣言
var x = "cat";

// letを用いて文字列を宣言
let y = "dog";

// varを用いて文字列を宣言

var x = "cat";

// letを用いて文字列を宣言

let y = "dog";

このように、宣言したい文字列をシングルクォーテーション（’ ‘）かダブルクオーテーション（” “）を用いて記述することで、変数に格納し、後々のプログラム内で利用できます。ここでは、変数xに”cat”、変数yに”dog”という文字列が格納されていることになります。

JavaScriptの主な文字列操作方法

JavaScriptでの文字列の宣言の仕方について学んだところで、次は文字列の操作方法について見てみましょう。ここでは、プログラム内でよく使う文字列の操作方法について取り上げます。”検索”、”置換”、”結合”、”分割”について、使用するメソッドの基本構文と、実際の活用例を紹介するので、ぜひ参考にしてください。

検索

指定した文字列が含んでいるかどうか、判断したいときに用いるのが”検索”機能です。

基本構文

検索対象の文字列.indexOf("検索したい文字列")

1	検索対象の文字列.indexOf("検索したい文字列")

検索は、indexOfを用います。これは、検索したい文字列が、対象の文字列の何番目にくるかという数値を返します。一方で、検索したい文字列が含まれていなかったら、「-1」を返します。そのため、「戻り値が-1かどうか」という条件分岐のプログラムを組むことで、対象の文字列に検索したい文字列が含まれているかどうかの判断ができます。実際にプログラムで見てみましょう。

実践プログラム例

// 検索対象となる文字列を宣言
var str = "MerryChristmas";

// indexOfを用いて検索
var results1 = str.indexOf("rr");  // results1に数値2が格納
var results2 = str.indexOf("cc");  // results2に数値-1が格納

if (str.indexOf("mm") != -1) {
   // 条件分岐を用いて、文字列が含まれていた場合に実行される
}

// 検索対象となる文字列を宣言

var str = "MerryChristmas";

// indexOfを用いて検索

var results1 = str.indexOf("rr"); // results1に数値2が格納

var results2 = str.indexOf("cc"); // results2に数値-1が格納

if (str.indexOf("mm") != -1) {

// 条件分岐を用いて、文字列が含まれていた場合に実行される

}

2行目で宣言した”MerryChristmas”という文字列が変数strに格納されています。

strに格納された文字列の中に、5行目では”rr”という文字が含まれているか、6行目では”cc”という文字列が含まれているか調べています。”rr”は、”MerryChristmas”の文字列の中で0から数え始めて、左から2番目に出現するので、results1には2が格納されます。一方で、”cc”という文字列は含まれていないため、results2には-1が格納されます。

また、この戻り値を利用して、8~10行目では、実際に条件分岐を用いた文字列検索を行っています。今回の場合は、strに格納された文字列に、”mm”が含まれていれば、カッコ内｛｝が実行されるという流れになっています。

検索には、indexOfの他に「search」や「match」もほぼ同じ方法で使うことができます！

置換

対象の文字列が含まれていた場合、指定した文字列に置き換えたいときに用いるのが”置換”機能です。

基本構文

置換対象の文字列.replace("置換前の文字列", "置換後の文字列")

1	置換対象の文字列.replace("置換前の文字列", "置換後の文字列")

置換は、replaceを用います。これは、調査したい対象の文字列の中に、replace内の括弧（）の前半で指定した文字列があった場合、後半で指定した文字列に置き換えるという機能です。プログラムを書いている途中で変更点が生じた場合、わざわざ目視で探してあったら消して書き換えるということをしなくていいので、とても便利な機能です。それでは実際のプログラムを見てみましょう。

実践プログラム例

// 調査対象の文字列を宣言
var str = "I like a dog";

// 置換処理を実行し、resultに格納
var result = str.replace("dog", "cat");

// 置換結果を表示
console.log(result);  // "I like a cat"を表示

// 調査対象の文字列を宣言

var str = "I like a dog";

// 置換処理を実行し、resultに格納

var result = str.replace("dog", "cat");

// 置換結果を表示

console.log(result); // "I like a cat"を表示

2行目で調査対象の文字列を指定し、変数strに格納しています。

5行目で、replaceを用いて置換を実行し、置換結果を変数resultに格納しています。ここでは、strに格納されている文字列の中で、”dog”という文字があったら”cat”に置き換えるように指定しています。そのため、8行目の変数resultを表示するというところでは、str内の”dog”を置き換えた”I like a cat”が表示されます。

結合

複数の文字列を繋げ合わせたいときに用いる機能が”結合”です。別々の変数を結合させるか、配列を結合させるかで記述が少し異なります。

複数の変数を結合

別々の変数に格納された文字列を結合させたい場合は、以下のように+で変数を足し合わせるだけで結合できます。

// 別々の変数に文字列を格納
var str_1 = "Merry";
var str_2 = "Christmas";

// 文字列を結合
var result = str_1 + str_2;

// 結合結果を表示
console.log(result);  // "MerryChristmas"が表示される

// 別々の変数に文字列を格納

var str_1 = "Merry";

var str_2 = "Christmas";

// 文字列を結合

var result = str_1 + str_2;

// 結合結果を表示

console.log(result); // "MerryChristmas"が表示される

2,3行目で宣言した文字列をそれぞれstr_1、str_2に格納し、6行目で結合した結果をresultに格納しています。9行目で変数resultを表示し、str_1とstr_2を結合した”MerryChristmas”が表示されます。

配列の結合

次に、配列に格納された文字列を結合する方法の解説をします。配列内の文字列を結合する場合は、joinを用います。

対象の配列名.join("繋ぐ間に入る文字");

1	対象の配列名.join("繋ぐ間に入る文字");

最初に対象の配列名を記し、joinの括弧内（）には、連結する文字列の間に挟む文字を指定できます。何も挟みたくなかったら、join(“”)と何も記述しないことで繋げます。実際のプログラムを見てみましょう。

// 対象の配列を宣言
var anime = ["Cat", "Mouse"];

// 配列内の文字列を結合
var result = anime.join("&");

// 結合結果を表示
console.log(result);  // "Cat&Mouse"と表示される

// 対象の配列を宣言

var anime = ["Cat", "Mouse"];

// 配列内の文字列を結合

var result = anime.join("&");

// 結合結果を表示

console.log(result); // "Cat&Mouse"と表示される

2行目で２つの文字列を保持した配列animeを指定しています。5行目で、anime内に格納された文字列”Cat”と”Mouse”を、”&”を挟んで結合させ、変数resultにその結果を格納しています。8行目では、結合させた結果の”Cat&Mouse”と表示されます。

分割

1つの文字列から、指定した文字で分けたいときに用いるのが、”分割”機能です。

基本構文

調査対象の文字列.split("区切りたい文字");

1	調査対象の文字列.split("区切りたい文字");

分割には、splitを用います。調査対象の文字列に対して、splitの括弧内（）の「区切り文字」で分割することができます。分割した結果は、配列なり変数なりに格納することができます。では、実際のプログラムを見てみましょう。

実践プログラム例

// 調査対象の文字列を宣言
var animal = "Dog&Cat&Mouse";

// 区切り文字で変数animalに格納された文字列を分割
var result = animal.split("&");

// 分割後の配列を表示
console.log(result);  // "[Dog, Cat, Mouse]"と表示される

// 調査対象の文字列を宣言

var animal = "Dog&Cat&Mouse";

// 区切り文字で変数animalに格納された文字列を分割

var result = animal.split("&");

// 分割後の配列を表示

console.log(result); // "[Dog, Cat, Mouse]"と表示される

2行目で、調査対象の文字列を宣言し、5行目で区切り文字で分割した結果を変数resultに格納しています。ここでは、”&”で分割しています。変数animalに格納された文字列を”&”で分割すると、”Dog”と”Cat”、”Mouse”と3つに分割されるため、resultは1×3の配列となり、8行目ではその結果が表示されます。

ここで取り上げなかった「文字列の切り出し」や「大文字・小文字の変換」などの操作方法については、「JavaScript 文字列 ○○」とやりたいことを検索すれば、使い方などが出てきますので、ぜひプログラムに活かしてください！

MEMO

「JavaScript 文字列 ○○」とやりたいことを検索して、適宜調べよう！

まとめ

いかがでしたでしょうか？今回は、JavaScriptの文字列の処理方法について、使用頻度が高いものを紹介しました。

JavaScriptに限らず、文字列の処理方法について、どのようなメソッドの種類があり、どのように使うのかを把握しておくことで、プログラムの作成効率がぐんっと上がります！ぜひ、JavaScriptの文字列処理方法ついて理解し、Webサービス作成やシステム構築に活かしてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。