JavaScriptで文字列操作3 ～substr・slice・substringメソッドの違い～

COLUMN コラム

JavaScriptで文字列操作3　～substr・slice・substringメソッドの違い～

2021年04月30日
JavaScriptで文字列操作3　～substr・slice・substringメソッドの違い～
- プログラマー
- WEBデザイナー

JavaScriptで文字列操作第三弾です。
今回は文字列の切り出しについてまとめます。

1.substrメソッド
「対象の文字列.substr( 開始位置, 切り出す文字数 );」で文字列を切り出します。
let str = 'どうぞ、よろしくお願いします！';
　　　　let result1 = str.substr(0, 3);
　　　　console.log(result1);
　　　　// -> どうぞ
　　　　let result2 = str.substr(4);
　　　　console.log(result2);
　　　　// -> よろしくお願いします！
　　　　let result3 = str.substr(-7);
　　　　console.log(result3);
　　　　// -> お願いします！
　　　　let result4 = str.substr(3, 0);
　　　　console.log(result4);
　　　　// ->

2.sliceメソッド
「対象の文字列.slice( 開始位置, 終了位置 );」で文字列を切り出します。
let str = 'どうぞ、よろしくお願いします！';
　　　　let result1 = str.slice(0, 3);
　　　　console.log(result1);
　　　　// -> どうぞ
　　　　let result2 = str.slice(4);
　　　　console.log(result2);
　　　　// -> よろしくお願いします！
　　　　let result3 = str.slice(-7);
　　　　console.log(result3);
　　　　// -> お願いします！
　　　　let result4 = str.slice(3, 0);
　　　　console.log(result4);
　　　　// ->

3.substringメソッド
「対象の文字列.substring( 開始位置, 終了位置 );」で文字列を切り出します。
let str = 'どうぞ、よろしくお願いします！';
　　　　let result1 = str.substring(0, 3);
　　　　console.log(result1);
　　　　// -> どうぞ
　　　　let result2 = str.substring(4);
　　　　console.log(result2);
　　　　// -> よろしくお願いします！
　　　　let result3 = str.substring(-7);
　　　　console.log(result3);
　　　　// -> どうぞ、よろしくお願いします！
　　　　let result4 = str.substring(3, 0);
　　　　console.log(result4);
　　　　// -> どうぞ

上記の通り、substr・slice・substringメソッドは基本的には同じ動きをしますが、マイナス値と開始位置の方が大きい場合に違う挙動になります。

	第二引数の省略	開始位置をマイナス値	開始位置＞終了位置
substr	開始位置から末尾まで	末尾からの文字数	空文字が返る
slice	開始位置から末尾まで	末尾からの文字数	空文字が返る
substring	開始位置から末尾まで	切り出されない(0に変換される)	開始位置と終了位置が反転する