JavaScriptのslice()メソッドは、文字列や配列から一部分を切り出すのに非常に便利です。
この記事では、そのslice()メソッドの基本的な使い方から、もう少し実践的な使い方までわかりやすく解説していきます。
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
slice()メソッドの基本
slice()メソッドとは
slice()メソッドは、文字列(String)や配列(Array)から、指定した範囲の要素を新しい文字列や配列として切り出すメソッドです。
元の文字列や配列はそのままで、切り出した部分が新しい文字列や配列として返されます。
基本的な構文
slice()メソッドの基本的な構文は以下のようになります。
文字列.slice(開始位置, 終了位置);
配列.slice(開始位置, 終了位置);両方とも開始位置は含むけれど終了位置は含まないことに注意しましょう。
また、終了位置は省略可能で、省略した場合は最後まで切り出されます。
使用例
文字列と配列、それぞれの簡単な使用例を見てみましょう。
// 文字列の例
let str = "ABCDEFG";
console.log(str.slice(1, 3)); // "BC"
// 配列の例
let arr = ["A", "B", "C", "D", "E", "F", "G"];
console.log(arr.slice(1, 3)); // ["B", "C"]もう少し実践的な使い方
負の数を指定する
slice()メソッドでは、開始位置と終了位置に負の数を指定することもできます。
その場合、後ろから数えた位置になります。
let arr = ["A", "B", "C", "D", "E"];
console.log(arr.slice(-3)); // ["C", "D", "E"]
console.log(arr.slice(1, -2)); // ["B", "C"]開始位置 ＞ 終了位置の場合
開始位置が終了位置より大きい場合、空の文字列や配列が返ります。
let str = "ABCDEFG";
console.log(str.slice(3, 1)); // ""
let arr = ["A", "B", "C", "D", "E"];
console.log(arr.slice(3, 1)); // []よくあるミスと注意点
文字列や配列以外にslice()を使おうとする
slice()メソッドは文字列と配列にしか使えません。
他のオブジェクトに使おうとするとエラーになるので注意しましょう。
let obj = {a: "A", b: "B", c: "C"};
console.log(obj.slice(1)); // TypeError: obj.slice is not a function開始位置や終了位置に不適切な値を指定する
開始位置や終了位置に、文字列や配列の長さを超える値や、数字以外の値を指定すると、予期せぬ結果になったりエラーになったりします。
let str = "ABCDEFG";
console.log(str.slice(1, 100)); // "BCDEFG"
console.log(str.slice(1, "3")); // "BC"
console.log(str.slice(1, "x")); // "A"slice()メソッドのまとめ
slice()メソッドは、文字列や配列の一部を切り出すのに非常に便利なメソッドです。
基本的な使い方をマスターすれば、さまざまな場面で活用できるでしょう。
- 開始位置と終了位置を指定して切り出す
- 負の数を指定すると後ろから数えた位置になる
- 文字列と配列にのみ使える
- 不適切な値を指定するとエラーになるので注意
ただし、類似のメソッドもいくつかあるので、使い分けに注意が必要です。
状況に応じて適切なメソッドを選択し、効率的なコーディングを心がけましょう。
類似のメソッドとの違い
substring()メソッド
substring()メソッドも、文字列の一部を切り出すメソッドです。
slice()メソッドとの主な違いは以下の2点です。
- 開始位置が終了位置より大きい場合、引数が入れ替えられる
- 負の数を指定すると0として扱われる
substr()メソッド
substr()メソッドも文字列の一部を切り出しますが、第2引数に切り出す文字数を指定する点がslice()やsubstring()と異なります。
let str = "ABCDEFG";
console.log(str.substr(1, 3)); // "BCD"splice()メソッド
splice()メソッドは配列専用のメソッドで、配列の要素を削除したり追加したりできます。
slice()メソッドとの主な違いは、元の配列を変更する点です。
let arr = ["A", "B", "C", "D", "E"];
console.log(arr.splice(1, 2)); // ["B", "C"]
console.log(arr); // ["A", "D", "E"]まとめ
slice()メソッドは、文字列や配列から指定した範囲の要素を切り出すのに非常に便利なメソッドです。
基本的な使い方をマスターすれば、さまざまな場面で活用できるでしょう。
ただし、類似のメソッドもいくつかあり、それぞれ動作や使用目的が異なります。状況に応じて適切なメソッドを選択し、効率的なコーディングを心がけましょう。
この記事が、皆さんのJavaScriptコーディングの助けになれば幸いです。
ぜひ実際のプロジェクトでslice()メソッドを活用してみてください！
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
