JavaScriptのsubstringの使い方！文字列を取り出す

JavaScriptで文字列から指定された範囲の部分文字列を抽出するsubstringメソッドについて書いています。

substringメソッドを使うと、文字列から特定の部分を取り出すことができます。
文字列から特定の部分を抽出したい場合に便利です。

substringメソッドの基本的な使い方

substringメソッドは、文字列から指定された範囲の部分文字列を抽出し、新しい文字列を返します。
基本的な構文は以下のとおりです。

string.substring(indexStart, indexEnd)

• indexStart: 部分文字列の開始位置（必須）。
  • 0以上の整数値を指定します。
  • 負の値を指定した場合、0として扱われます。
• indexEnd: 部分文字列の終了位置（省略可能）。
  • indexStartより大きい整数値を指定します。
  • 省略した場合、文字列の末尾までが抽出されます。
  • 負の値を指定した場合、0として扱われます。

文字列の一部を取り出す

substringメソッドを使って、文字列の一部を取り出してみます。

const str = 'Hello World!';

console.log(str.substring(0, 5)); // 結果：Hello
console.log(str.substring(6)); // 結果：World!

最初にstr変数に文字列「Hello World!」を代入しています。

そして、str文字列からsubstringメソッドを使って、部分文字列を取り出しています。
始めは「0」(開始位置)と「5」(終了位置)を渡しています。これで0番目から5番目までの部分文字列を取り出します。

2つ目の例では、開始位置の「6」を渡しています。
そのため6番目から末尾までの部分文字列が取り出されます。

引数の順序

substringメソッドは、indexStartがindexEndより大きい場合、2つの引数を入れ替えて処理します。

const str = 'Hello World!';

console.log(str.substring(5, 0)); // 結果：Hello

この例では、indexStartが「5」、indexEndが「0」ですが、substringメソッドはこれをsubstring(0, 5)として処理します。
結果、0番目から5番目までのHelloが取り出されます。

負のインデックス

substringメソッドに負のインデックスを指定した場合、0として扱われます。

const str = 'Hello World!';

console.log(str.substring(-3)); // 結果：Hello World!
console.log(str.substring(0, -3)); // 結果：

str変数の文字列にたいして、負のインデックスを指定して、substringメソッドを呼び出しています。
負のインデックスが0として扱われているため、結果がそれぞれ上記のようになります。

最初は開始位置が「0」として扱われて、文字列のすべてが返ってきます。
次は開始・終了位置ともに「0」なので、部分文字列が返ってきていません。

sliceメソッドとsubstringメソッドの違い

sliceメソッドとsubstringメソッドは、どちらも文字列から指定された範囲の部分文字列を抽出するために使用されますが、両者の間にはいくつかの重要な違いがあります。

1. 負のインデックスの扱い

• sliceメソッド: 負のインデックスは、文字列の末尾からの位置として扱われます。
• substringメソッド: 負のインデックスは、0として扱われます。

2. 引数の順序

• sliceメソッド: indexStartがindexEndより大きい場合、空文字列を返します。
• substringメソッド: indexStartがindexEndより大きい場合、2つの引数を入れ替えて処理します。

違いのまとめ

サンプルコード
2つの処理を比較したサンプルコードです。

const str = 'Hello World!';

// slice()メソッドの例
console.log(str.slice(-6)); // 結果：World!
console.log(str.slice(5, 0)); // 結果：""

// substring()メソッドの例
console.log(str.substring(-6)); // 結果：Hello World!
console.log(str.substring(5, 0)); // 結果：Hello

sliceメソッドは負のインデックスを末尾からの位置として扱っています。
そして、引数の順序が逆の場合には空文字列を返します。

一方、substringメソッドは負のインデックスを0として扱い、引数の順序が逆の場合には引数を入れ替えて処理しています。

JavaScriptのsubstringメソッドの使い方まとめ

今回はJavaScriptのsubstringメソッドの使い方について解説しました。
この記事の内容をまとめます。