文字列から指定した文字を取り出す

文字列から自由に文字を取得する

文字列に対してsubstrメソッド、substringメソッド、sliceメソッドなどのメソッドを使うことで、「5文字目から3文字取得」のように指定した文字を取り出すことができます。
3つのメソッドは同じような機能を提供しますが、パラメータの指定方法がそれぞれ異なります。

以降はそれぞれのメソッドの使い方を1つずつ解説していきます。

substrメソッドの使い方

substrメソッドは第1パラメータに取得する文字列の開始位置、第2パラメータに取得したい文字数を指定します。
第2パラメータは第1パラメータで指定した開始位置を起点とした文字数になります。

なお、第1パラメータは負の値を指定すると、文字列の末尾から数えた位置を開始位置にすることができます。

JS コード例

let test = 'StrangerThings面白い';

// 8文字目から6文字取得する
console.log( test.substr(8,6)); // Things

// 第2パラメータ省略
console.log( test.substr(8)); // Things面白い

// パラメータ省略
console.log( test.substr()); // StrangerThings面白い

// 文字列の長さ以上の開始位置を指定
console.log( test.substr(17,1)); // ""（空文字）

// 開始位置を負の値で指定
console.log( test.substr(-5,3)); // gs面

1つ目はsubstrメソッドは「9文字目から6文字取得する」という指定で、最も一般的な使い方です。
文字列は配列と同じ考え方をするため、先頭の1文字目「S」は0から開始となります。
そこで9文字目の「T」を取得するには8を指定します。
そこから6文字なので文字列「Things」を取得することができます。

2つ目は第2パラメータを省略したパターンで、開始位置以降の全ての文字列を取得します。
続く3つ目はパラメータの指定を全て省略していますが、こうすると文字列を全て取得します。

4つ目は開始位置を元の文字列より長く指定したパターンですが、エラーにはならずに空文字が戻り値となります。

5つ目は開始位置に負の値を指定したパターンで、-5は「末尾から5文字目を開始位置にする」という指定になります。
つまり、「末尾から5文字目を開始位置として、3文字取得する」という指定です。
末尾は一番後ろの文字が-1となることがポイントです。
ちなみに第2パラメータに負の値を指定したときは戻り値が空になります。

substringメソッドの使い方

substringメソッドは第1パラメータに取得する文字列の開始位置、第2パラメータに終了位置を指定します。
substrメソッドとは第2パラメータの起点が異なり、substringメソッドはパラメータ2つとも元の文字列の先頭を起点とします。

また、負の値は0を指定したときと同じように文字列の先頭を起点とします。

JS コード例

let test = 'StrangerThings面白い';

// (1)8文字目〜14文字目を取得
console.log( test.substring(8,14)); // Things

// (2)第2パラメータを第1パラメータより低い値にする
console.log( test.substring(8, 5)); // ger
console.log( test.substring(8,0)); // Stranger
console.log( test.substring(8,-10)); // Stranger

// (3)第2パラメータを省略
console.log( test.substring(8)); // Things面白い

// (4)パラメータ省略
console.log( test.substring()); // StrangerThings面白い

// (5)第1パラメータを0や負の値にする
console.log( test.substring( 0, 5)); // Stran
console.log( test.substring( -5, 5)); // Stran

(1)は第1パラメータを8、第2パラメータに14を指定して「元の文字列の9文字目から15字目まで取得する」という指定になります。
このメソッドも文字列を配列と同じように先頭の1文字目を0とするため、8を指定すると9文字目である「T」を開始位置とし、第2パラメータの14で15文字目の「s」までの「Things」を取得することができます。

(2)は第2パラメータを第1パラメータより低い値を指定したパターンです。
substringメソッドは第2パラメータも文字列の先頭を起点とするため、1つ目の「test.substring(8, 5)」は6文字目〜9文字目、2つ目の「test.substring(8, 0)」は1文字目〜9文字目を取得する指定になります。
3つ目は負の値を指定していますが、substringメソッドでは0より低い負の値も0と同じ指定になるため、2つ目と同じ1文字目〜9文字目を取得することができます。

(3)は第2パラメータを省略したパターンです。
この場合は第1パラメータの開始位置から文字列の末尾まで取得します。

(4)は全てのパラメータを省略しています。
この場合は文字列を先頭から末尾まで取得します。

(5)は第1パラメータを0や負の値にしたパターンですが、いずれも0の指定となるため先頭の1文字目〜6文字目までを取得します。

sliceメソッドの使い方

sliceメソッドは第1パラメータに取得する文字列の開始位置、第2パラメータに終了位置を指定します。
パラメータはどちらも元の文字列の先頭を起点としますが、負の値を指定すると末尾から数えた文字数を指定することができます。

JS コード例

let test = 'StrangerThings面白い';

// (1)パラメータを2つ指定
console.log( test.slice(8,14)); // Things

// (2)第1パラメータのみ指定
console.log( test.slice(5)); // gerThings面白い
console.log( test.slice(-3)); // 面白い

// (3)第1パラメータに負の値を指定
console.log( test.slice(-9,14)); // Things

// (4)第2パラメータに負の値を指定
console.log( test.slice(8,-3)); // Things

// (5)パラメータを省略
console.log( test.slice()); // StrangerThings面白い

(1)はパラメータを2つ指定し、9文字目〜15文字目を切り取って「Things」取得します。
このメソッドでも上記2つのメソッドと同様に、文字列を配列のように先頭1文字目を0として開始します。

(2)は第1パラメータのみ指定しています。
1つ目は5を指定して6文字目以降の「gerThings面白い」を取得します。
2つ目は負の値で-3を指定し、末尾の3文字目から末尾までの「面白い」を取得します。

(3)はパラメータを2つ指定していますが、第1パラメータのみ負の値-9を指定しています。
これは末尾から9文字目の「T」を開始位置として、第2パラメータの14で15文字目までの「Things」を取得します。

(4)は第2パラメータに負の値を指定した例です。
開始位置は8、終了位置は-3の指定なので、9文字目から末尾の3文字までの「Things」を取得します。

(5)はパラメータを省略しています。
パラメータを省略すると元の文字列をそのまま取得します。

以上、3つのメソッドを解説してきました。

substrメソッドは第2パラメータに指定する値が取得する文字数なので直感的に一番使いやすいメソッドです。

それ以外のsubstringメソッドとsliceメソッドは非常によく似たメソッドですが、パラメータに負の値を使用したときの挙動が異なります。
負の値を使ったときに末尾から数えて文字列を取得したいときはsliceメソッドを使い、それ以外の場合はsubstringメソッドを使います。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。