すべてのJavaScript開発者が知っておくべき8つの文字列メソッド

JavaScriptの文字列操作で忘れず知っておきたい文字列関数一覧。

1.indexOf()

indexOf()メソッドは、その名の通り、文字列の中で指定した値が最初に出現するインデックスを返します。

下の例だと、strの文字列の中で最初に「Sparsh」が出現するのはインデックス12なので12を返却します。インデックス数なので0から始まります。

let str = "Hey This Is Sparsh Gupta, The guy Behind Sparsh Codes";
console.log(str.indexOf("Sparsh")); 
//12

2.lastIndexOf()

indexOf()メソッドとは逆に、lastIndexOf()メソッドは、文字列の中で指定した値が最後に出現したインデックスを返します。

下の例だと、strの文字列で「Sparsh」が最後に現れたのはインデックス41なので41を返却します。

et str = "Hey This Is Sparsh Gupta, The guy Behind Sparsh Codes";
console.log(str.lastIndexOf("Sparsh")); 
//41

indexOf()および lastindexOf()メソッドは、大文字と小文字を区別します。indexOf()とlastindexOf()メソッドは、引数に渡された値の文字列が存在しない場合、-1を返します。例えば、上記の例では、str文字列に「Sparsh」が存在しない場合、どちらのメソッドも-1を返却します。

3.slice()

slice()メソッドを使うと、文字列の一部を抽出することができ、このメソッドは抽出された部分の文字列を返却します。

開始 - 抽出を開始したいインデックスの位置。
終了 - どのインデックスまで抽出するか。

下の例では、slice()メソッドに0から16インデックスまでの抽出するようにしているので、'Johny Since last'が返されます。

let str = "Johny since last year has imporoved a lot";
console.log(str.slice(0, 16)); 
//"Johny since last"

文字列の最後からのインデックスを指定するために、負の数をend引数として使用することができます。もし、end引数を省略することもでき、省略した場合、その値は自動的に文字列の長さと同じになります。

4.split()

split()メソッドは、指定された文字列を文字列の配列に分割するために使用されます。引数として指定されたセパレータを使用して、与えられた文字列を部分文字列に分離します。
ややこしい定義だと思いますが、簡単な例でsplit()を理解しましょう。split()はseparatorとlimitの2つの引数を指定できます（limitについては後述します）。

let str = "Elon Pandey was born in Patna, Bihar";
console.log(str.split(" "));
//Array ["Elon", "Pandey", "was", "born", "in", "Patna,", "Bihar"]

let str = "celebrate; every;win:no;matter; how; small";
console.log( str.split(";"));
// Array ["celebrate", " every", "win:no", "matter", " how", " small"]

上の1,2行目の例では、空白" "を区切り文字として使っていたので、split()は空白" "を使ってstrの文字列を分割します。これはstr文字列を入力し、" "と表示されたところでその部分を分割していきます。例えば、Elonを分割した後" "と表示され、Pandeyを分割するというように前から順次実行されています。

limit引数

split()メソッドは、オプションで2つ目のパラメータ引数を指定できます。limitはその名の通り、文字列の分割数を制限することができます。

下の例では、分割数の上限を2に設定しているので、split()は2回しか分割せず、最初の2つの文字列の配列を返却します。

let str = "celebrate; every;win; no;matter; how;small";
console.log(str.split(";", 2)); 
//　Array ["celebrate", " every"]

5.replace()

replace()メソッドは、文字列の中から指定した値や正規表現で一致する項目を探し出し、対象を見つけた後、その部分を別の文字列に置き換えます。置き換えられるのは最初に出てきた部分だけであることを覚えておいてください。

replace()は、置き換えられた項目を含む新しい文字列を返却します。

let demoString = "john met another john yesterday";
console.log( demoString.replace("john", "JASON"));
// "JASON met another john yesterday"
const regex = /met/i;
console.log(demoString.replace(regex, 'MET'));
// "john MET another john yesterday"

6.concat()

concat()メソッドは、2つ以上の文字列を結合するために使用します。

let str1 = "Follow";
let str2 = " Osparshcodes";
let str3 = " for more amazing content";
console.log(str1.concat(str2, str3));
// "Follow Osparshcodes for more amazing content"

7.trim()

trim()メソッドは、文字列の両側にあるホワイトスペースを取り除きます。

trim()メソッドは、元の文字列を変更しません。つまり、strの文字列を変更するのではなく、両側の空白を削除した後の新しい文字列を返却します。

let str = " sparsh gup ";
console.log(str.trim());
// "sparsh gup"
console.log(str);
// " sparsh gup "

8.includes()

includes()メソッドは、対象の文字列に、指定された文字が含まれているかどうかを判断するために使用されます。文字列に指定された文字が含まれている場合はtrueを、含まれていない場合はfalseを返します。

let str = "Hello world, it's version 2.0";
console.log( str.includes ( "Hello"));
// true
console.log(str.includes ("2.0")); 
// true
console.log(str.includes("3.0")); 
// false

第2引数として、開始位置を受け取ります。これを使用して、文字の検索を開始するインデックスを定義できます。

下の例では、開始位置を6と定義していたので、6番目のインデックスから'Hello'の検索を開始し、6番目のインデックス以降に「Hello」は存在しないので、falseを返却します。

let str = "Hello world, it's version 2.0";
console.log(str.includes ( "Hello", 6)); 
// false