文字列切り出し徹底解説！substr vs substring vs slice

JavaScriptのsubstrとsubstringの違い

引数の解釈

• substr(start, length):

  • start: 切り出し開始位置を表すインデックス
  • length: 切り出す文字数

つまり、substringはendインデックスを含む文字列を切り出し、substrはlength文字分の文字列を切り出します。

例:

const str = "Hello, world!";

// substr: 5文字目から3文字分を切り出す
const substrResult = str.substr(5, 3); // "llo"

// substring: 5文字目から12文字目(12番目を含めない)を切り出す
const substringResult = str.substring(5, 12); // "world"

負のインデックス

• substr:

  • 負のインデックスを指定すると、文字列末尾からの位置を表す
  • 例えば、str.substr(-3, 2)は末尾から3文字目から2文字分を切り出す

const str = "Hello, world!";

// substr: 末尾から3文字目から2文字分を切り出す
const substrResult = str.substr(-3, 2); // "ld"

// substring: 負のインデックスは無視され、先頭から3文字目から2文字分を切り出す
const substringResult = str.substring(-3, 2); // "el"

非推奨

• • ECMAScript 3で導入された古いメソッド
  • 今後廃止される可能性があり、代わりにsubstringを使うことを推奨
• • 多くのブラウザでsubstrよりも高速

• 文字列を切り出すには、substringを使うのが一般的
• 負のインデックスを使う場合は、substrとsubstringの挙動が異なる
• 将来性と互換性を考慮すると、substrではなくsubstringを使うべき

const str = "Hello, world!";

// substr: 5文字目から3文字分を切り出す
const substrResult = str.substr(5, 3);
console.log(substrResult); // "llo"

// substring: 5文字目から12文字目(12番目を含めない)を切り出す
const substringResult = str.substring(5, 12);
console.log(substringResult); // "world"

// 負のインデックス: 末尾から3文字目から2文字分を切り出す
const substrResult2 = str.substr(-3, 2);
console.log(substrResult2); // "ld"

// 負のインデックス: 負のインデックスは無視され、先頭から3文字目から2文字分を切り出す
const substringResult2 = str.substring(-3, 2);
console.log(substringResult2); // "el"

このコードを実行すると、以下の出力が得られます。

llo
world
ld
el

練習問題

以下のコードを実行し、出力を予想してください。

const str = "JavaScript, the world's most popular programming language!";

// 1. 10文字目から15文字目(15番目を含めない)を切り出す
const substringResult1 = str.substring(10, 15);

// 2. 末尾から5文字目から2文字分を切り出す
const substrResult2 = str.substr(-5, 2);

// 3. 10文字目から文字列末尾までを切り出す
const substringResult3 = str.substring(10);

console.log(substringResult1);
console.log(substrResult2);
console.log(substringResult3);

JavaScriptで文字列を切り出す他の方法

slice() メソッドは、substring と似ていますが、いくつかの点で違いがあります。

• slice() は開始位置と終了位置を指定しますが、終了位置は包括されます。
• slice() は負のインデックスも使用できます。

const str = "Hello, world!";

// slice: 5文字目から12文字目(12番目を含む)を切り出す
const sliceResult = str.slice(5, 12);
console.log(sliceResult); // "world!"

// slice: 末尾から3文字目から2文字分を切り出す
const sliceResult2 = str.slice(-3, -1);
console.log(sliceResult2); // "ld"

charAt() メソッドは、指定されたインデックスの文字を取得します。

const str = "Hello, world!";

// 5文字目の文字を取得
const charAtResult = str.charAt(5);
console.log(charAtResult); // "l"

split() メソッドは、文字列を指定された区切り文字で分割し、配列を返します。

const str = "Hello, world!";

// 空白文字で分割
const splitResult = str.split(" ");
console.log(splitResult); // ["Hello,", "world!"]

正規表現を使用して、文字列の一部を抽出することもできます。

const str = "Hello, world!";

// 数字を取得
const regexResult = str.match(/\d+/);
console.log(regexResult); // ["1"]

substr と substring は、文字列を切り出すための最も基本的な方法です。

その他の方法は、それぞれ異なる利点と欠点があります。

使用する方法は、要件と状況によって異なります。