JavaScriptの文字列の切り出し処理

こんばんわ、ぺんしるです。

業務をしていると、文字列の中の特定の文字だけ抽出したい場合がよくあります。

例えば、最初の1文字とか1文字目から3文字目とかです。

今日はそんな時に使う文字列の切り出し処理について解説していきますね。

業務で一度は使う必要になる処理なので、覚えておいてくださいね(^^)/

slice()メソッド

slice()メソッドを使う方法です。

以下の例では、文字列’abcde’の最初の文字（0番目）から3文字目まで切り出しています。

var str = 'abcde';
var ret = str.slice(0,3);
console.log(ret); //abcが出力

substr()メソッドを使う方法です。

以下の例では、文字列’abcde’の最初の文字（0番目）から3文字を切り出しています。

slice()メソッドでは、何文字目までと指定しますが、substr()メソッドは文字数（範囲）を指定する点が違いです。

var str = 'abcde';
var ret = str.substr(0,3);
console.log(ret); //abcが出力

文字数（範囲）を省略することも可能です。

省略した場合は開始位置から末尾までの文字が切り出し対象になります。

var str = 'abcde';
var ret = str.substr(3);
console.log(ret); //deが出力

substring()メソッドを使う方法です。

以下の例では、文字列’abcde’の最初の文字（0番目）から3文字目までを切り出しています。

var str = 'abcde';
var ret = str.substring(0,3);
console.log(ret); //abcが出力

特定の1文字を切り出す方法としてStringオブジェクトのcharAt()メソッドを使う方法があります。

以下の例では、文字列’abcde’の1文字目を切り出しています。

var str = new String('abcde');
var ret = str.charAt(1);
console.log(ret); //bが出力

slice()メソッドとsubstring()メソッドってよく似ていますが、地味な違いがあるので解説していきますね。

終了位置より開始位置のほうが大きい場合の動作に違いがあります。

substring()の場合は、開始位置と終了位置の値を逆転して処理をします。

var str = 'abcde';
var ret = str.substring(3,0);
console.log(ret); //abcが出力

slice()の場合は、空文字を返却します。

var str = 'abcde';
var ret = str.slice(3,0);
console.log(ret); //空文字が出力

substring()の場合は、マイナス値を0に変換します。その後、開始位置と終了位置を逆転します。

以下の場合だと、0番目から2文字目までが切り出されることになり、’ab’が出力されることになります。

var str = 'abcde';
var ret = str.substring(2,-3);
console.log(ret); //abが出力

slice()の場合は、マイナス値は末尾の文字からの文字数と解釈されます。

以下の場合だと、3文字目から最後の文字の一文字前（-1）までを切り出すことになり、’d’が出力されることになります。

var str = 'abcde';
var ret = str.slice(3,-1);
console.log(ret); //'d'が出力

いやぁ、、ややこしいですね( ﾟдﾟ )

いかがでしたか？

不明点があれば、遠慮なくこちら、またはこちら（匿名での質問ができます）からご質問くださいね。

ではでは！！