JavaScriptのsubstringで文字列を切り出す方法

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

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

    JavaScriptのsubstring()メソッドは指定の開始位置から終了位置までの文字を切り出すメソッドです。本コラムでは、substring()メソッドの使い方をサンプルコードと共に解説します。

    目次

    1. substring()メソッド

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

    ●substring()メソッド

    stringObj.substring(from, [to]])

    ▲ページトップへ戻る

    1.2. パラメーター

    from:切り出す文字列の開始位置を指定します。

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

    ▲ページトップへ戻る

    1.3. 戻り値

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

    ▲ページトップへ戻る

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

    2.1. 文字列の一部分を切り出す方法

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

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

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

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

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

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

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

    ●実行結果

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

    ▲ページトップへ戻る

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

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

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

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

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

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

    ●実行結果

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

    ▲ページトップへ戻る

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

    substringメソッドにマイナスの値を指定すると文字列の切り出しは行われません。

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

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

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

    ●実行結果

    substringの引数にマイナスを指定すると、文字列の切り出しは行われません

    ▲ページトップへ戻る

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

    substringメソッドの終了位置の値を、開始位置の値よりも小さく指定すると、無条件で二つの値を反転させます。

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

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

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>substring() method - Introduction to JavaScript</title>
    <body>
    <p>substringの開始位置が終了位置よりも大きい場合、無条件で反転します。</p>
    <button onclick="strFunction04()">substringの実行</button>
    <p id="sample4"></p>
    <script>
    function strFunction04() {
    var stringObj = "0123456789";
    var result= stringObj.substring(5, 1);
    document.getElementById("sample4").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    ●実行結果

    substringの開始位置が終了位置よりも大きい場合、無条件で反転します。

    ▲ページトップへ戻る

    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サイト内検索サービスを展開している企業内で下記業務をメインに対応していただ...