JavaScriptの学習を始めてコードを書いていると、
文字列から一部だけ文字をとりだしたいけど、どうすれば？
という場面が出てくるはずです。
そこで今回はJavaScriptで文字列の中から指定のものだけ取り出せる方法について、
文字列の切り出し方
をご紹介します。
JavaScriptで文字列の切り出し方法がわからない方は、ぜひ参考にしてみてくださいね。
文字列の切り出し
文字列の切り出しによく使われるプロパティは
slice・substr・ substring
の3つです。
それでは違いと役割について見てきましょう。
slice
文字列の中から、「開始位置」と「終了位置を」指定して切り出せます。（終了位置は省略可能）
※文字の左端は「0」とカウントするのでご注意ください。
|
1 2 3 4 5 |
文字列.slice(開始位置,終了位置) // もしくは 文字列.slice(開始位置) |
実際に文字を切り出す例文がこちらです。
|
1 2 3 4 5 6 7 8 9 10 |
let sample ="123456789"; console.log(sample.slice(4,8)); //開始位置は4で、終了位置は8の範囲を切り出し。 let sample2 ="123456789"; console.log(sample2.slice(4)); //開始位置は4で、そこから最後まで切り出し。 let sample3 ="123456789"; console.log(sample3.slice(-2)); //開始位置をマイナスにすると、文字列の右端からカウントできます。 |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
5678
56789
89
substr
文字列の中から、「開始位置」と「切り出す長さ」を指定して切り出せます。（長さは省略可能）
|
1 2 3 4 5 |
文字列.substr(開始位置 ,切り出す長さ) //もしくは 文字列.substr(開始位置) |
実際に文字を切り出す例文がこちらです。
|
1 2 3 4 5 6 7 8 9 10 |
let sample ="123456789"; console.log(sample.substr(3,5)); //開始位置は3で、5文字分を切り出し。 let sample2 ="123456789"; console.log(sample2.substr(6)); //開始位置は6で、そこから最後まで切り出し。 let sample3 ="123456789"; console.log(sample3.substr(-5,2)); //開始位置は文字列の右端から5で、2文字分を切り出し。 |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
45678
789
56
substring
このプロパティは、さきほどご紹介したliceに似ています。
|
1 2 3 4 5 |
文字列.substring(開始位置 , 終了位置); //もしくは 文字列.substring(開始位置); |
あれ？似てるというか…一緒ですよね？
実は、sliceとはいくつか挙動が異なります。
・開始位置がマイナスの場合は「0」とカウントされる。
・開始位置が終了位置より大きい場合は、開始位置と終了位置が入れ替わる。
実際に文字を切り出す例文がこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let sample ="123456789"; console.log(sample.substring(4,8)); //開始位置は4で、終了位置は8の範囲を切り出し。 let sample2 ="123456789"; console.log(sample2.substring(8,4)); //開始位置が終了位置よりお大きため、開始位置は4で、終了位置は8の範囲を切り出し。 let sample3 ="123456789"; console.log(sample3.substring(4)); //開始位置は4で、そこから最後まで切り出し。 let sample4 ="123456789"; console.log(sample4.substring(-2)); //開始位置-2は0となる。 |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
5678
5678
56789
123456789
以上3つは非常に似ているので整理して上手に使い分けてください。
charAt
文字列の中から、「指定位置」から「一文字」だけ切り出せます。
|
1 |
文字列.charAt(指定位置) |
実際に文字を切り出す例文がこちらです。
|
1 2 3 |
let sample ="123456789"; console.log(sample.charAt(3)); //指定位置が3の一文字だけ切り出し。 |
上記のコードを実行すると、コンソールには下記の内容が出力されます。
4
まとめ
以上、今回は
文字の切り出し方
についてご紹介しました。
ご紹介した4つは似ていますので、しっかり整理して使いこなすためにご活用ください。
