JavaScriptの文字列操作【プログラミング初心者向け教材】

プログラミング
2020.09.21
プログラミングをしていると、文字列を結合したい、文字列を抽出したいということがありますが、「どう記述するんだっけ」といつも調べている方はいないでしょうか。
僕もその一人で、決して全部を覚える必要はないと思っているのですが、調べるにも時間はかかるので一度まとめてみることにしました。
本記事では、JavaScriptの文字列操作について、やりたい操作ごとにまとめてみました。
操作ごとにまとめているので、単なる関数の書き方だけでなく、該当する関数が直接ない場合にも、別の方法を含めて記載しています。
忘れた時に調べやすく、復習しやすいように心がけていますので、一人でも多くの方に役立てていただけたら幸いです。

JavaScriptの文字列操作

文字列操作として、以下の内容をとりあげます。
  • 文字列を結合したい
  • 文字列を抽出したい
  • 文字列の長さを求めたい
  • 文字列を検索したい
  • 文字列を置換したい
  • 文字列を削除したい
  • 文字列を配列に分割したい
  • 文字列をトリミングしたい
  • 文字列をパディングしたい
  • 文字列を大文字・小文字に変換したい
  • 文字列を数値に変換したい
  • 数値を文字列に変換したい
  • 文字列が一致しているか確認したい

文字列を結合したい

最も単純なのは、＋演算子で結合する方法です。
結合する最初が文字列であれば、数値と結合しても文字列になります。
s1 = "Java";
s2 = "Script";
r = s1 + s2;
console.log(r); // JavaScript
s1 = "Java";
s2 = "Script";
n = 1234;
r = s1 + s2 + n;
console.log(r); // JavaScript1234
文字列同士の間に何を含めて結合したい場合は、concatを使うこともできます。
s1 = "Hello";
s2 = "World";
r = s1.concat(" ", s2);
console.log(r); // Hello World
分割された配列の中身を結合したい場合は、joinを使います。joinの引数には文字列同士の間に含めたい文字列を指定します。
a = ["Java","Script"," ","Hello","World"];
r = a.join("");
console.log(r); // JavaScript HelloWorld
テンプレートリテラルを用いて、文字列に埋め込むことで結合のようにすることもできます。
s1 = "Script";
s2 = "Hello";
r = `Java${s1} ${s2}World!!`;
console.log(r); // JavaScript HelloWorld!!

文字列を抽出したい

文字列を抽出するには、slice、substr、substringを利用する方法があります。
s = "Hello JavaScript!!";
r = s.slice(0, 5);
console.log(r); // Hello
s = "Hello JavaScript!!";
r = s.substr(0, 5);
console.log(r); // Hello
s = "Hello JavaScript!!";
r = s.substring(0, 5);
console.log(r); // Hello
sliceとsubstringは、抽出したい開始位置と終了位置を指定します。
substrは、抽出したい開始位置と文字数を指定します。
3つとも、抽出したい開始位置と終了位置を指定する方法は同じで、結果も同じとなります。
sliceとsubstringは、開始位置にマイナス値を指定した場合の挙動が異なります。
以下にまとめます。
slice
substr
substring
第2引数を省略した場合
開始位置から末尾までを抽出
開始位置から末尾までを抽出
開始位置から末尾までを抽出
開始位置がマイナス値の場合
末尾からマイナス値分戻った地点が開始位置となる
末尾からマイナス値分戻った地点が開始位置となる
開始位置が0となる
開始位置が文字列長が大きい場合
空文字が返される
空文字が返される
開始位置と終了位置が反転して抽出される

文字列の長さを求めたい

文字列の長さを調べるには、lengthを使います。
s = "1234567890";
r = s.length;
console.log(r); // 10
文字列数なので、日本語でも数字でも文字の数を返します。
s = "あいうえお";
r = s.length;
console.log(r); // 5

文字列を検索したい

文字列の中に、特定の文字列を含んでいるかどうかを検索するには、indexOf、search、match、RegExpオブジェクトのtestを用いる方法があります。
indexOfは指定した文字列が含まれていれば、その文字列の開始位置を返します。
含まれない場合は-1を返します。
また、indexOfは文字列を先頭から検索していき、最初に見つけた開始位置を返しますが、後方から検索したい場合には、lastIndexOfを使用します。
s = "Hello JavaScript!!";
r = s.indexOf("!");
console.log(r); // 16
s = "Hello JavaScript!!";
r = s.lastIndexOf("!");
console.log(r); // 17
searchは、正規表現を指定して検索します。
見つかった場合は、その開始位置を返し、見つからなかった場合には-1を返します。
s = "Hello JavaScript!!";
r = s.search(/a/g);
console.log(r); // 7
matchも正規表現を指定して検索します。
見つかった文字列を配列で返します。見つからなかった場合にはnullを返します。
s = "Hello JavaScript!!";
r = s.match(/a/g);
console.log(r); // [ 'a', 'a' ]
RegExpオブジェクトのtestを利用すると、見つかった場合はtrue、見つからなかった場合はfalseを返します。
if文の条件文によく使われたりします。
s = "Hello JavaScript!!";
regexp = /a/;
r = regexp.test(s);
console.log(r); // true

文字列を置換したい

文字列の置換は、replaceを使います。replaceは、置換対象を検索する正規表現と置換後の文字列を指定し、置換後の文字列全体を返します。
s = "Hello Python!!";
r = s.replace(/Python/, "JavaScript");
console.log(r); // Hello JavaScript!!

文字列を削除したい

文字列の中から特定の文字列を削除（除去）するには、replaceの置換後の文字列を空文字にすることで実現できます。
s = "Hello JavaScript!!";
r = s.replace(/Hello /, "");
console.log(r); // JavaScript!!

文字列を配列に分割したい

文字列を特定の文字で区切って配列にするには、splitを使います。
CSVやTSVの各要素を配列に分割するような場面でよく使われます。
s = "JavaScript,Python,Java,Ruby,Go";
r = s.split(",");
console.log(r); // [ 'JavaScript', 'Python', 'Java', 'Ruby', 'Go' ]

文字列をトリミングしたい

文字列操作におけるトリミングとは、前後の空白を除去することを表します。
trim、trimLeft、trimRightを使って行うことができます。
trimは文字列前後の空白（大文字の空白も含む）を除去します。
s = "  JavaScript ";
r = s.trim();
console.log(r); // 「JavaScript」
trimLeftは文字列前の空白（大文字の空白も含む）を除去します。
s = "  JavaScript ";
r = s.trimLeft();
console.log(r); // 「JavaScript 」
trimRightは文字列後の空白（大文字の空白も含む）を除去します。
s = "  JavaScript ";
r = s.trimRight();
console.log(r); // 「  JavaScript」

文字列をパディングしたい

文字列の前後に何かの文字を付加することをパディング（詰め物）と呼びます。
padStart、padEndを使って行うことができます。
padStartは、指定した文字列長になるように、文字列前に指定した文字をパディングします。
s = "123";
r = s.padStart(10, "0");
console.log(r); // 0000000123
padEndは、指定した文字列長になるように、文字列後に指定した文字をパディングします。
s = "123";
r = s.padEnd(10, "0");
console.log(r); // 1230000000

文字列を大文字・小文字に変換したい

文字列をすべて大文字に変換するには、toUpperCaseを使います。
s = "JavaScript";
r = s.toUpperCase();
console.log(r); // JAVASCRIPT
文字列をすべて小文字に変換するには、toLowerCaseを使います。
s = "JavaScript";
r = s.toLowerCase();
console.log(r); // javascript

文字列を数値に変換したい

文字列を数値に変換するには、parseIntを使う、Numberオブジェクトの引数に渡す方法があります。
s = "123";
r = parseInt(s);
console.log(r); // 123
console.log(typeof r); // number
s = "123";
r = Number(s);
console.log(r); // 123
console.log(typeof r); // number

数値を文字列に変換したい

数値を文字列に変換するには、toStringを使う、Stringオブジェクトの引数に渡す方法があります。
n = 123;
r = n.toString();
console.log(r); // 123
console.log(typeof r); // string
n = 123;
r = String(n);
console.log(r); // 123
console.log(typeof r); // string

文字列が一致しているか確認したい

文字列同士が一致しているかどうかは、==（等価演算子）または、===（同値演算子）を使って確認できます。
==（等価演算子）は、文字列として一致していればtrue、一致していなければfalseを返します。型が一致・不一致は関係ありません。
s = "123";
n = 123;
r = (s == n);
console.log(r); // true
===（同値演算子）は、文字列と型が一致していればtrue、どちらかが一致していなければfalseを返します。
s = "123";
n = 123;
r = (s === n);
console.log(r); // false

様々な関数を使いこなせるようになろう

実際の開発現場でも今回紹介した文字列操作はよく使われます。
どの言語でも文字列を操作するための便利な機能はたくさん用意されています。
これらをできるだけ使うことで、生産性の向上、ミスの削減、読みやすいコードへつなげることができ、プログラマーとしても成長することができます。
今回は、JavaScriptの文字列操作についてまとめてみました。
参考になれば幸いです。

コメント

タイトルとURLをコピーしました