JavaScriptのsliceメソッドを使おう｜文字列を抜き出す

（最終更新月：2023年10月）

✔当記事は以下の疑問を持つ方へ向けて書かれています

✔当記事を通し、あなたに伝えたいこと

• javascriptのsliceメソッドの基本的な概念
• sliceメソッドの正確な使い方とその応用例
• javascriptのsliceメソッドを活用した詳細な実例

当記事では、javascriptのsliceメソッドの基本から応用まで、具体的なサンプルを交えてわかりやすく解説します。

各項目をしっかりと把握することで、sliceメソッドを自在に使いこなせるようになるでしょう。

ぜひ最後までお読みください。

「slice」メソッドとは？

こちらでは、「slice」メソッドの基本的な役割と構文について詳しく解説します。

• 「slice」メソッドの役割
• 「slice」メソッドの基本構文

「slice」メソッドの役割

「slice」メソッドは、文字列や配列から指定した範囲の要素や文字を取り出すメソッドです。

元のデータは変更されず、新しいデータが返されます。

「slice」メソッドの基本構文

基本的な構文は以下のとおり。

文字列.slice(start, end);

start は取り出しの開始位置、end は終了位置を示します。

const fruits = ["apple", "banana", "cherry"]; 
fruits.slice(0, 2);

このコードは、”apple”と”banana”の2つの要素を含む新しい配列を返します。

文字列を操作する「slice」メソッド

「slice」メソッドは、文字列の操作にも使用できます。

• 文字列を扱う基本的なsyntax
• 文字列を切り抜くやり方
• 任意の範囲の文字列を切り出す手法

文字列を扱う基本的なsyntax

文字列に対しても、配列と同様の構文で「slice」メソッドを使用できます。

const greeting = "Hello, World!"; greeting.slice(0, 5);

このコードは “Hello” という文字列を返します。

文字列を切り抜くやり方

指定した範囲の文字を切り抜けます。

const name = "John Doe"; name.slice(5);

このコードは “Doe” という文字列を返します。

任意の範囲の文字列を切り出す手法

開始位置と終了位置を指定して、任意の範囲の文字列を切り出せます。

const phrase = "JavaScript is fun!"; 
phrase.slice(10, 12);

このコードは “is” という文字列を返します。

配列操作する「slice」メソッド

「slice」メソッドは、配列の操作にも非常に便利です。

• 配列を扱う基本的なsyntax
• 配列要素を切り抜くやり方

配列を扱う基本的なsyntax

配列から特定の範囲の要素を取り出せます。

const numbers = [1, 2, 3, 4, 5]; 
numbers.slice(1, 4);

このコードは [2, 3, 4] という新しい配列を返すものです。

配列要素を切り抜くやり方

開始位置を指定して、その位置から最後までの要素を取り出せます。

const colors = ["red", "green", "blue", "yellow"]; colors.slice(2);

このコードは [“blue”, “yellow”] という新しい配列を返します。

「slice」とその類似メソッドの違い

「slice」メソッド以外にも、文字列や配列を操作するためのメソッドがいくつか存在します。

それらのメソッドとの違いを明確に理解することで、適切な場面で正確にメソッドを選択できるでしょう。

• 「slice」と「substring」の比較
• 「slice」と「substr」の違い
• 「slice」と「splice」の違い

「slice」と「substring」の比較

「substring」メソッドも文字列を切り抜くメソッドですが、引数の扱い方が異なります。

例えば、負の値を指定した場合の挙動が「slice」とは異なります。

let str = "JavaScript";

// sliceメソッドの場合
console.log(str.slice(1, 5));      // "avaS"
console.log(str.slice(-3));        // "ipt"
console.log(str.slice(1, -2));     // "avaScr"

// substringメソッドの場合
console.log(str.substring(1, 5));  // "avaS"
console.log(str.substring(-3));    // "JavaScript" 
console.log(str.substring(1, -2)); // "J"

負の値やNaNは0として扱われます。

これは、substringが2つの引数のうち小さい方の数値を開始位置、大きい方の数値を終了位置として解釈するためです。

そのため、substring(1, -2)はsubstring(1, 0)と同じと解釈され、結果は”J”となります。

「slice」と「substr」の違い

「substr」メソッドは、開始位置と取り出す文字数を指定して文字列を切り抜きます。

この挙動は「slice」メソッドとは異なり、特定のシチュエーションで「substr」が適しているといえるでしょう。

const word = "programming"; 
word.substr(4, 4);

このコードは “ramm” という文字列を返します。

「slice」と「splice」の違い

「splice」メソッドは、配列から要素を削除または置換し、必要に応じて新しい要素を追加するメソッドです。

このメソッドは元の配列を変更する破壊的な操作をおこないます。

一方、「slice」は非破壊的です。

const fruits = ["apple", "banana", "cherry"]; 
fruits.splice(1, 1, "grape");

このコードは元の配列を [“apple”, “grape”, “cherry”] に変更します。

「slice」メソッドを使用する時のエラーと対処法

sliceメソッドのエラーとその対処法を以下に示します。

「slice」メソッドを使用する際には、いくつかの一般的なエラーや問題が発生する可能性があるからです。

• 数値型のエラーの対処法
• 配列ではない場合のエラー対処法

数値型のエラーの対処法

「slice」メソッドの引数として数値以外の型を渡すとエラーが発生します。

常に正しい型の引数を渡すことで、このようなエラーを避けられるでしょう。

配列ではない場合のエラー対処法

「slice」メソッドは、文字列や配列に対して使用されることを前提としています。

オブジェクトやほかのデータ型に対して使用するとエラーが発生する可能性があります。

適切なデータ型の使用を心がけてください。

「slice」を使った実践的なコード例

「slice」メソッドの実践的な使用例をいくつか紹介します。

• 「call」を使って他のデータ型を操作する方法
• 「map」を使った反復処理の例

「call」を使って他のデータ型を操作する方法

配列風のオブジェクトやNodeListに対しては、callと組み合わせて使いましょう。

const nodeList = document.querySelectorAll('div'); 
const arrayFromNodeList = Array.prototype.slice.call(nodeList);

「map」を使った反復処理の例

「slice」で取得した部分配列に対して、mapメソッドで反復処理をおこなえます。

const numbers = [1, 2, 3, 4, 5]; 
const slicedNumbers = numbers.slice(0, 3); 
const doubled = slicedNumbers.map(num => num * 2);

まとめ

当記事では、javascriptのsliceメソッドについて学習してきました。

「slice」メソッドは、JavaScriptでのデータ操作において非常に便利なツールです。

正しい使い方をマスターすることで、より効率的なコードを書くことができるようになります。

当記事が、「slice」メソッドの理解と活用の手助けとなれば幸いです。