JavaScriptのsliceで文字列を切り取る方法

    • このページをはてなブックマークに追加

    公開日:2018年12月20日 最終更新日:2019年09月25日

    JavaScriptのslice()メソッドは引数で指定した位置の文字列を切り取るメソッドです。本コラムでは、slice()メソッドの使い方をサンプルコードと共に解説します。

    目次

    1. slice()メソッド

    1.1. slice()メソッドの基本書式

    ●slice()メソッド

    stringObj.slice(from, [to])

    ▲ページトップへ戻る

    1.2. パラメーター

    from:

    切り取る文字列の開始位置を指定します。

    [to]:

    (省略可能)切り取る文字列の終了位置を指定します。toを省略した場合は、fromから文字列の最後までを切り取ります。

    ▲ページトップへ戻る

    1.3. 戻り値

    fromからtoの手前まで切り取った文字列を返します。

    ▲ページトップへ戻る

    2. slice()メソッドの使い方

    2.1. 文字列の一部分を切り取る方法

    サンプルコードで文字列「0123456789」の一部分を切り取ってみましょう。

    var stringObj = "0123456789"; //切り取り対象の文字列
    stringObj.slice(1, 4); //Stringオブジェクトの一部分を切り取る

    サンプルHTMLの「JS_Sample1.html」をコピーして保存する場合は、ファイル形式を「utf-8」にします。

    slice(1, 4)は、開始位置のインデックス「1」から終了位置のインデックス「4」の間の文字列を切り取ります。

    ●JS_Sample1.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>slice() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、Stringオブジェクト「0123456789」のインデックス1からインデックス4の間の文字列が切り取られます。</p>
    <button onclick="strFunction01()">sliceの実行</button>
    <p id="sample1"></p>
    <script>
    function strFunction01() {
    var stringObj = "0123456789";
    var result= stringObj.slice(1, 4);
    document.getElementById("sample1").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    「slice実行」ボタンをクリックして動きを確認して下さい。切り取られた文字列の「123」が段落に表示されます。

    ●サンプルコードの実行結果

    ボタンをクリックすると、Stringオブジェクト「0123456789」のインデックス1からインデックス4の間の文字列が切り取られます。

    ▲ページトップへ戻る

    2.2. 文字列を指定の位置から最後まで切り取る方法

    Stringオブジェクトの文字列を指定位置から最後まで切り取るには、sliceメソッドの第二引数を省略します。

    var stringObj = "0123456789"; //切り取り対象の文字列
    stringObj.slice(5); //Stringオブジェクトの一部分を切り取る

    ●JS_Sample2.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>slice() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、Stringオブジェクト「0123456789」のインデックス5から文字列の最後までの文字列が切り取られます。</p>
    <button onclick="strFunction02()">sliceの実行</button>
    <p id="sample2"></p>
    <script>
    function strFunction02() {
    var stringObj = "0123456789";
    var result= stringObj.slice(5);
    document.getElementById("sample2").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    sliceメソッドの開始位置のみを指定すると、指定の位置から文字列の最後まで文字を切り取ります。

    ●サンプルコードの実行結果

    ボタンをクリックすると、Stringオブジェクト「0123456789」のインデックス5から文字列の最後までの文字列が切り取られます。

    ▲ページトップへ戻る

    2.3. 引数にマイナスの数値を指定した場合

    sliceメソッドにマイナスの値を指定すると後ろから数えた文字列が切り取られます。

    var stringObj = "0123456789"; //切り取り対象の文字列
    stringObj.slice(-2);

    ●JS_Sample3.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>slice() method - Introduction to JavaScript</title>
    <body>
    <p>sliceの引数にマイナスを指定すると、後ろから数えた文字列が切り取られます</p>
    <button onclick="strFunction03()">sliceの実行</button>
    <p id="sample3"></p>
    <script>
    function strFunction03() {
    var stringObj = "0123456789";
    var result= stringObj.slice(-2);
    document.getElementById("sample3").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    ●サンプルコードの実行結果

    sliceの引数にマイナスを指定すると、後ろから数えた文字列が切り取られます

    ▲ページトップへ戻る

    2.4. 終了位置が開始位置の数値より小さい場合

    sliceメソッドの終了位置の値を、開始位置の値よりも小さく指定すると、空の文字列を返します。

    var stringObj = "0123456789"; //切り取り対象の文字列
    stringObj.slice(5, 1); //Stringオブジェクトの一部分を切り取る

    ●JS_Sample4.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>slice() method - Introduction to JavaScript</title>
    <body>
    <p>sliceの開始位置が終了位置よりも大きい場合、空の文字列を返します。</p>
    <button onclick="strFunction04()">sliceの実行</button>
    <p id="sample4"></p>
    <script>
    function strFunction04() {
    var stringObj = "0123456789";
    var result= stringObj.slice(5, 1);
    if(result == ""){
    var res = "空の文字です。";
    }else{
    var res = "空ではありません。";
    }
    result
    document.getElementById("sample4").innerHTML = res;
    }
    </script>
    </body>
    </html>
    --------------------

    ●サンプルコードの実行結果

    sliceの開始位置が終了位置よりも大きい場合、空の文字列を返します。

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    年収400万円〜700万円
    勤務地 東京都 品川区
    年収400万円〜700万円
    勤務地 東京都 渋谷区
    月額単価50万円〜90万円
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【LAMP】システムエンジニア|ECに特化した顧客管理システムの開発 NEW

    年収 :400万円〜700万円

    自社サービス「うちでのこづち」、また新サービスの開発全般 をお願いします。 アジャイル開発を行っ...

    株式会社E-Grant

    正社員

    【PHP】システムエンジニア|ショッピングシステムの開発・運用 NEW

    年収 :400万円〜700万円

    ネットショップ構築サービスの運営業務や新機能の開発を お任せします。 同社の通販事業部で利用して...

    ジェイフロンティア株式会社

    フリーランス

    【JavaScript/GO】アプリ開発エンジニア ★eスポーツアプリの開発

    月額単価 :50万円〜90万円

    【業務内容】 自社サービスとして展開しているeスポーツアプリの開発に携わっていただきます。 【環...

    フリーランス

    【Ruby/HTML5】サーバサイドエンジニア ★Webサイト内検索サービスのバックエンド開発

    【業務内容】 自社でWebサイト内検索サービスを展開している企業内で下記業務をメインに対応していただ...