Category: DEV

Javascript文字列のメソッド : slice(), substring(), includes(), startsWith(), trim(), replace()…….

フロントエンド(React, Vue, Angular)もバックエンド(Nodejs)もジャバスクリプト(Javascript)が使われる時代になって、だんだんジャバスクリプトの文法が重要となりますね。

その中、文字列(String)関連のメソッドはよく使うのに、あまり覚えてはいないやつですね。😂

文字列関連のメソッドは一度覚えておくと自動に覚えられるぐらい使う頻度が高いので最初だけ頑張ればですね！

では、頻繁に使うメソッドの中slice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test()をご紹介します。

sliceメソッドはインデックスをパラメータで渡し、必要な文字列を抽出します。

スタートインデックス(start index)と終了インデックス(end index、省略可)を渡し、終了インデックスを省略する場合は文字列の最後までになります。

パラメータが０の場合は頭から一番目、-1は逆で後ろから一番目の意味になります。

const myWord = 'primavera';

myWord.slice(0,5);   // 'prima'
myWord.slice(-4);    // 'vera'
myWord.slice(3);     // 'mavera'

myWord.slice(3,1);    // '' -> slice()はスタートが終了より大きいと空を返す

substringメソッドもsliceと同じくインデックスを渡し、文字列を抽出します。

基本的な操作は同様ですがsubstringはスタートが終了より大きいの場合自動に位置を交換してメソッドを実施します。

また、substringに負数を入れると０と認識します。

例えば(3, -1)を渡すと(3, 0)として認識します。それに(3, 0)はスタートが大きいので自動交換し、(0, 3)を実施します。

メソッド名が似たようなsubstrは’位置’と’文字数’をパラメータに渡すメソッドです。

const myWord = 'invierno';

myWord.substring(3);     // 'ierno'
myWord.substring(1,3);   // 'nv'

myWord.substring(3,1);   // 'nv' -> 自動にスタートと終了位置交換

myWord.substring(3,-1);  // 'inv' -> 負数は0, 自動位置交換

myWord.substring(-4);    // 'invierno' -> 負数は0, スタート(0)から最後まで

myWord.substr(1,3);      // 'nvi' -> スタート1から三つ

includesは文字列の中、指定した文字列が含まれているかをチェックします。

パラメータは文字列(必須)とインデックス(省略可)を渡し、返すのはtrue或はfalseです。

このメソッドは指定文字はもちろん、配列の中で空の値を確認するためには使えます。

const myWord = 'alegria';

myWord.includes('le');       // true
myWord.includes('i');        // true
myWord.includes('rio');      // false

const myArray = ['dream','','king'];
myArray.includes('');       // true   -> myArray[1]が空なのでtrue
myArray.includes('dream');  // true   -> myArray[0]と一致
myArray.includes('drea');   // false  -> 要素は完全一致する場合のみtrue

startsWithメソッドも文字列が含まれているかをチェックします。

文字列のみ渡すと0インデックスから始まる指定文字の存在を確認し、BOOLEANを返します。

endsWithは指定文字で終わることをチェックします。

const mySentence = 'cafe con leche';

mySentence.startsWith('cafe');     // true
mySentence.startsWith('fe');       // false
mySentence.startsWith('fe',2);     // true

mySentence.endsWith('eche');      // true

trimは文字列両断の空白を除くメソッドです。

文字列変換の過程で入られた空白またはタイプミスで入った文字列は文字比較の時falseを返し、エラーになりがちです。

なのでtrimで空白を事前に除き、エラーを予防することができます。

文字列両断の空白、タップ、改行(/n)文字を除くことができますが、両断ではなく文字列中に入っているのは作動しません。

const mySentence = '  la casa de papel   ';

mySentence.trim();        // 'la casa de papel'

const mySentence = ' el amor \n';

mySentence.trim();       // 'el amor'

replaceは文字列から指定した文字を探して変換文字に変換します。

文字列の中に指定文字が一つ以上存在するとき、最初に見当たるのだけが変更対象になります。

例えば ‘my_name_is_Ron’からアンダーバーを全部空白にするためreplace(‘_’,’ ‘)にしても結果は’my name_is_Ron’になります。

なので、文字列の中で存在する全ても指定文字を変換したい時は正規表現を使うと行けます。

const mySentence = 'my name is:Ron';

mySentence.replace(':',' ');        //'my name is Ron'

const mySentence = 'my_name_is_Ron';

mySentence.replace('_',' ');      // 'my name_is_Ron'

//正規表現ですべての文字を変換
mySentence.replace(/_/g, ' ');    // 'my name is Ron'

indexOfは指定文字の位置を返します。

このメソッドは指定文字の前または後で文字列を切り取るとき有用なものです。

たとえ、’Z001-03’から後ろの’03’だけを抽出したいとき、indexOfで’-‘文字を探し、返しのindex +1位置から最後までカットすると’03’を切り取ることができます。

もし文字列の中指定文字が一つ以上の場合、頭から探し始め最初に見当たる文字位置を返します。

でもパラメータにindexを渡すと指定された位置から指定文字を探します。

注意点はstart indexを渡しても返す値は全体の文字列から何番目であるという数字を返します。

後ろから検索するのはlastIndexOfで、後ろから最初の指定文字の位置を返します。

この時も返す値は頭から何番目であるという数字です。

指定文字がなければ-1を返します。

const mySentence = 'Z001-03';

mySentence.indexOf('-');     // 4

mySentence.substring(mySentence.indexOf('-')+1);    // '03'

mySentence.indexOf('D');    // -1

const mySentence = 'Z001-03-02';

mySentence.indexOf('-');    // 4
mySentence.indexOf('-', 5);   // 7

mySentence.lastIndexOf('-')   // 7

testは一般的に正規表現と一緒に使い、渡す文字列と比較し有効性を確認します。

パスワード、アルファベット、特殊文字、生年月日などの形式検査に使えます。

const mySentence = /a/;
const myWord = 'baby';

mySentence.test(myWord);   // true

/\d/.test('cookie');       // false \dは数字を意味(正規表現)
/\d/.test('cookie1');      // true

上の例以外にも山ほどメソッドが多いし、また新しく作られるメソッドもたくさんありますね。

また必要な機能のメソッドがあれば確認していきましょ！

あざーす！