【JavaScript】文字列の操作でよく使うメソッドまとめ

前回のJavaScriptでの配列の操作方法に続き、今回は文字列を操作する主要なメソッドについて紹介します。

↓↓↓ 配列の操作方法はこちらの記事をご覧ください ↓↓↓

【JavaScript】配列の操作でよく使うメソッドまとめ | KATSU LOG

JavaScriptで配列を操作するメソッドについて紹介します。

https://katsu-dev.netlify.app/blog/web/js/array/

【JavaScript】配列の操作でよく使うメソッドまとめ | KATSU LOG-image

文字列中に指定した文字列があるか検索する
- includes
- startsWith
- endsWith
- indexOf
- lastIndexOf
- match
- matchAll
- search
パディングする
- padStart
- padEnd
指定した文字列で置き換える
- replace
- replaceAll
指定した箇所の文字列を抽出する
分割して配列にする
大文字にする
小文字にする
両端からスペースを削除する
まとめ

文字列中に指定した文字列があるか検索する

文字列の検索には次のいくつかの方法があります。

includes

文字列.includes(検索する文字列, 検索開始位置)で、文字列中に指定した文字列があるか検索します。

const paragraph = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';
console.log(paragraph.includes(word))  // trueとなる

第一引数に検索する文字列を指定します
第二引数はオプションで、検索を開始する位置を指定します(文字の先頭が0となります)
返値は指定した文字列があればtrue、ない場合はfalseです

startsWith

文字列.startsWith(検索する文字列, 検索開始位置)で、文字列の先頭が指定した文字列で始まるか判定します。

const str1 = 'Saturday night plans';
console.log(str1.startsWith('Sat'));  // true となる

第一引数に検索する文字列を指定します
第二引数はオプションで、判定する位置を指定します(文字の先頭が0となります)
返値は指定した文字列で始まっていればtrue、そうでない場合はfalseです

endsWith

文字列.endsWith(検索する文字列, 検索開始位置)で、文字列の末尾が指定した文字列で終わるか判定します。

const str1 = 'Cats are the best!';
console.log(str1.endsWith('best!'));  // true となる

第一引数に検索する文字列を指定します
第二引数はオプションで、判定する位置を指定します(文字の先頭を0とし、指定した位置を末尾として判定します)
返値は指定した文字列で終わっていればtrue、そうでない場合はfalseです

indexOf

文字列.indexOf(検索する文字列, 検索開始位置)で、文字列中に指定した文字列があるか検索し、最初に出現する位置を返します。

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const word = 'dog';
console.log(paragraph.indexOf(word)); // 40 となる

第一引数に検索する文字列を指定します
第二引数はオプションで、検索を開始する位置を指定し、その位置から文字列の末尾に向かって検索します(文字の先頭は0です)
返値は指定した文字列が最初に見つかった位置を、ない場合は-1です(文字列の先頭は0です)
第二引数を指定した場合も、返値は文字列の先頭から数えた位置となります

lastIndexOf

文字列.lastIndexOf(検索する文字列, 検索開始位置)で、文字列中に指定した文字列があるか検索し、最後に出現する位置を返します。

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const word = 'dog';
console.log(paragraph.lastIndexOf(word)); // 52 となる

第一引数に検索する文字列を指定します
第二引数はオプションで、検索を開始する位置を指定し、その位置から文字列の先頭に向かって検索します(文字の先頭は0です)
返値は指定した文字列の最後の位置を、ない場合は-1です(文字列の先頭は0です)
第二引数を指定した場合も、返値は文字列の先頭から数えた位置となります

match

文字列.match(正規表現)で、文字列中に指定した正規表現に一致するものがあるか検索して返します。

const str = '123ABC456DEF';
const regex1 = /(\d+)([A-Z]+)/g;  // グローバルフラグあり
console.log(str.match(regex1));  // ["123ABC", "456DEF"] となる

const regex2 = /(\d+)([A-Z]+)/;  // グローバルフラグなし
console.log(str.match(regex2));  // ["123ABC", "123", "ABC"] となる

引数には正規表現を使用します
返値は、正規表現にgフラグを使用していれば、正規表現に一致する文字全てを配列として返します
正規表現にgフラグを使用していない場合は、正規表現に最初に一致するものと、そのキャプチャグループ(正規表現で()指定したもの)全てを配列にして返します
一致するものがなければnullを返します

matchAll

文字列.matchAll(正規表現)で、文字列中に指定した正規表現に一致するものがあるか検索して返します。

const str = '123ABC456DEF';
const regex = /(\d+)([A-Z]+)/g;
const array = [...str.matchAll(regex)];
console.log(array[0]);  // ["123ABC", "123", "ABC"] となる
console.log(array[1]);  // ["456DEF", "456", "DEF"] となる

引数には正規表現を使用し、gフラグが必須です
返値は、正規表現に一致する文字全てと、それぞれのキャプチャグループ(正規表現で()指定したもの)全てをイテレータとして返します(配列とは少し扱いが異なります)
一致するものがなければnullを返します

search

文字列.search(正規表現)で、文字列中に引数に指定した正規表現に一致するものがあるか検索します。

返値は、一致するものがあればその最初の位置を、なければ-1です。

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const regex = /[^\w\s]/g;
console.log(paragraph.search(regex));   // 43 となる

パディングする

文字列の桁数を揃えたい場合には、以下の方法があります。

padStart

文字列.padStart(桁数, パディングする文字)で、文字列を第一引数で指定した桁数になるように、先頭から第二引数で指定した文字で埋めて返します。

第二引数を省略すると半角スペースで埋められます。

const str = '5';
console.log(str.padStart(3, '0'));   // "005" となる

padEnd

文字列.padEnd(桁数, パディングする文字)で、文字列を第一引数で指定した桁数になるように、末尾から第二引数で指定した文字で埋めて返します。

第二引数を省略すると半角スペースで埋められます。

const str = 'Breaded Mushrooms';
console.log(str.padEnd(25, '.'));    // Breaded Mushrooms........ となる

指定した文字列で置き換える

replace

文字列.replace(検索パターン, 置換する文字)で、文字列のうち、第一引数で指定したパターンに一致する最初の部分、または全てを第二引数で指定した文字列で置換して返します。

const str = '123ABC456DEF';
console.log(str.replace('456DEF', '789GHI'));  // '123ABC789GHI' となる

const regex = /(\d+)([A-Z]+)/;
console.log(str.replace(regex, '789GHI'));  // '789GHI456DEF' となる

第一引数に検索パターンを文字列、または正規表現で指定します
第二引数に置換する文字列、または置換する文字列を返す関数を指定します
第一引数が文字列の場合、最初に一致したパターンのみを第二引数で置換して返します
第一引数が正規表現の場合は、gフラグが指定されていれば一致する全てのパターンを置換し、gフラグがなければ最初に一致したパターンのみを置換して返します

replaceAll

文字列.replaceAll(検索パターン, 置換する文字)で、文字列のうち、第一引数で指定したパターンに一致するもの全てを第二引数で指定した文字列で置換して返します。

const str = '123ABC456DEF';
console.log(str.replaceAll('456DEF', '789GHI'));  // '123ABC789GHI' となる

const regex = /(\d+)([A-Z]+)/g;
console.log(str.replaceAll(regex, '789GHI'));  // '789GHI789GHI' となる

第一引数に文字列パターン、または正規表現(gフラグ必須)を指定します
第二引数に置換する文字列、または置換する文字列を返す関数を指定します
返値は、一致するパターン全てを第二引数で置換した後の文字列です

指定した箇所の文字列を抽出する

文字列.slice(開始位置, 終了位置)で指定した位置の文字列を抽出して返します。

const str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.slice(31));   // "the lazy dog."
console.log(str.slice(4, 19));  // "quick brown fox"
console.log(str.slice(-4));  // "dog."
console.log(str.slice(-9, -5));  // "lazy"

第一引数で抽出を開始する位置を、文字列の先頭を0として指定します。指定する値が負の値の場合、文字列の末尾を-1として、先頭に遡っていきます。
第二引数で抽出を終了する位置を、文字列の先頭を0として指定します。これも負の値の場合、文字列の末尾を-1として、先頭に遡っていきます。
第二引数を省略すると、第一引数で指定した位置から、文字列の最後までを抽出します。

分割して配列にする

文字列.split(区切文字)で、文字列を指定した区切り文字毎の配列に変換して返します。

const str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.split(' ')[3]); // "fox"
console.log(str.split('')[8]);  // "k"

大文字にする

文字列.toUpperCase()で文字列を全て大文字に変換して返します。

const paragraph = 'The quick brown fox jumps over the lazy dog.';
console.log(paragraph.toUpperCase());  // "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG." となる

小文字にする

文字列.toLowerCase()で文字列を全て小文字に変換して返します。

const paragraph = 'The quick brown fox jumps over the lazy dog.';
console.log(paragraph.toLowerCase());  // "the quick brown fox jumps over the lazy dog." となる

両端からスペースを削除する

文字列.trim()で文字列の両端からスペースを削除して返します。

const paragraph = '   Hello world!   ';
console.log(paragraph.trim());   // "Hello world!" となる