【JavaScript】文字数（長さ）を指定して文字列を切り出す：substrの代替テクニック

2026年1月24日

概要

JavaScriptで「開始位置」と「文字数（長さ）」を指定して文字列を切り出す場合、かつては substr() メソッドが使われていました。しかし、現在 substr() は**非推奨（Deprecated）**となっており、Web標準から将来的に削除される可能性があります。本記事では、推奨される slice() メソッドを使用して、「○文字目から○文字分を取得する」というロジックを安全かつモダンに実装する方法を解説します。

仕様（入出力）

入力: 長文テキスト、切り出し開始位置（インデックス）、取得したい文字数。
出力: 指定された長さ分の部分文字列。
動作:
- 入力フォームで数値を指定し、ボタンを押すと切り出し結果を表示する。
- substr と同様の「長さ指定」の挙動を slice で再現する。

基本の使い方

slice(開始位置, 終了位置) の第2引数に「開始位置 + 取得したい長さ」を渡すことで、長さ指定の切り出しを再現します。

const text = "Professional";
const start = 3;
const length = 5;

// substr(3, 5) と同じ結果になるモダンな書き方
// 3文字目から、(3+5)文字目の手前まで = 5文字分
const result = text.slice(start, start + length); 

console.log(result); // "fessi"

コード全文（HTML / JavaScript）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Extraction Tool</title>
    <style>
        body { font-family: sans-serif; padding: 20px; max-width: 600px; }
        .control-group { margin-bottom: 15px; }
        label { display: inline-block; width: 100px; font-weight: bold; }
        input[type="number"] { width: 80px; padding: 5px; }
        textarea { width: 100%; height: 80px; padding: 5px; box-sizing: border-box; }
        button { padding: 8px 16px; background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result-box {
            margin-top: 20px;
            padding: 15px;
            background: #e9ecef;
            border-left: 5px solid #007bff;
            font-family: monospace;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

    <h2>文字列切り出しツール (長さ指定)</h2>
    
    <div class="control-group">
        <p>対象テキスト:</p>
        <textarea id="targetText">The quick brown fox jumps over the lazy dog.</textarea>
    </div>

    <div class="control-group">
        <label for="startIndex">開始位置:</label>
        <input type="number" id="startIndex" value="4" min="0">
        <span>文字目から</span>
    </div>

    <div class="control-group">
        <label for="lengthVal">長さ:</label>
        <input type="number" id="lengthVal" value="5" min="0">
        <span>文字分を取り出す</span>
    </div>

    <button id="extractBtn">実行</button>

    <div id="resultOutput" class="result-box">ここに結果が表示されます</div>

    <script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * HTML要素の参照
 */
const targetText = document.getElementById("targetText");
const startIndex = document.getElementById("startIndex");
const lengthVal = document.getElementById("lengthVal");
const extractBtn = document.getElementById("extractBtn");
const resultOutput = document.getElementById("resultOutput");

/**
 * 長さを指定して文字列を切り出すヘルパー関数
 * (String.prototype.substr の代替実装)
 * * @param {string} str - 対象の文字列
 * @param {number} from - 開始インデックス
 * @param {number} len - 取得する文字数
 * @returns {string} - 切り出された文字列
 */
const extractByLength = (str, from, len) => {
    // sliceの終了位置 = 開始位置 + 長さ
    return str.slice(from, from + len);
};

/**
 * 実行ボタンのクリックイベント
 */
const handleExtract = () => {
    const text = targetText.value;
    const start = parseInt(startIndex.value, 10) || 0;
    const length = parseInt(lengthVal.value, 10) || 0;

    // 切り出し処理の実行
    const result = extractByLength(text, start, length);

    // 結果の表示
    resultOutput.textContent = result;
    
    console.log(`開始: ${start}, 長さ: ${length}, 結果: "${result}"`);
};

// イベントリスナーの登録
extractBtn.addEventListener("click", handleExtract);

カスタムポイント

負の値の扱い: substr は第一引数に負の値を指定すると「末尾から」と解釈されましたが、slice も同様に負の値をサポートしています。ただし、長さ計算のロジック（start + length）が変わるため、負の値を許容する場合は計算式の調整が必要です。
安全な文字数制限: 指定された長さが文字列の末尾を超えた場合、slice は自動的に文字列の最後までを取得して止まるため、エラーにはならず安全です。

注意点

substr の非推奨化: 古いコード（レガシーシステム）では substr(from, length) が使われていることがありますが、新規開発では使用しないでください。MDNなどのドキュメントでも「Web標準から削除される可能性がある」と警告されています。
サロゲートペア（絵文字など）: slice も substr も、文字数ではなく「UTF-16コードユニット」単位でカウントします。そのため、絵文字（例: 🍎）などの4バイト文字を途中で切ると文字化けが発生します。厳密な文字数カウントが必要な場合は、スプレッド構文 [...str].slice(start, end).join('') を使用してください。

応用

末尾から文字数指定で切り出す

「後ろから5文字目から、2文字分欲しい」といった特殊なケースの実装です。

const text = "1234567890";
// 末尾から5文字目の位置を特定し、そこから2文字分取得
const start = -5;
const len = 2;

// slice(-5, -5 + 2) => slice(-5, -3) となる
const result = text.slice(start, start + len);

console.log(result); // "67"