JavaScript Tips | 文字列操作：文字列を指定文字数で切り詰める

JavaScript JavaScript
スポンサーリンク
スポンサーリンク

文字列を指定文字数で切り詰めるとは

業務システムやWebアプリケーションでは、長い文字列を一定の長さで表示したい場面が頻繁にあります。

例えば次のようなケースです。

  • 商品一覧の商品名表示
  • お知らせ一覧のタイトル表示
  • ブログ記事の概要表示
  • 検索結果一覧の説明文表示
  • チャットメッセージのプレビュー表示
  • 管理画面のテーブル表示

長い文字列をそのまま表示すると、レイアウトが崩れたり、一覧画面が見づらくなったりします。 そのため実務では「指定した文字数まで表示し、それ以上は切り詰める」という処理をよく行います。

例えば次のような文字列があるとします。 

JavaScriptユーティリティ関数完全ガイド2026年版

これを20文字まで表示したい場合は次のようになります。 

JavaScriptユーティリティ...

このような処理を「文字列の切り詰め（Truncate）」と呼びます。

まずはsubstring()を覚えよう

JavaScriptではsubstring()を使用すると、文字列の一部を取得できます。 


// 元の文字列
const text = "JavaScriptユーティリティ関数完全ガイド";

// 先頭から10文字取得
const result = text.substring(0, 10);

console.log(result);
JavaScript

実行結果 

JavaScript

substring()の仕組み

substring()は次の形式で使用します。 


文字列.substring(開始位置, 終了位置);
JavaScript

例えば、 


text.substring(0, 10);
JavaScript

は「0文字目から10文字目の直前まで取得する」という意味になります。

指定文字数で切り詰める基本実装

もっとも単純な切り詰め処理は次のようになります。 


// 表示文字数
const maxLength = 15;

// 元文字列
const text = "JavaScriptユーティリティ関数完全ガイド";

// 指定文字数で切り詰め
const result = text.substring(0, maxLength);

console.log(result);
JavaScript

実行結果 

JavaScriptユーティ

ただし、この方法だけでは文字列が途中で切れていることが利用者に伝わりません。

実務でよく使われる「…」付き切り詰め

実際の業務システムでは、切り詰められたことが分かるように「…」を付与することが一般的です。 


// 最大文字数
const maxLength = 15;

// 元文字列
const text = "JavaScriptユーティリティ関数完全ガイド";

// 文字数超過時のみ切り詰め
const result =
    text.length > maxLength
        ? text.substring(0, maxLength) + "..."
        : text;

console.log(result);
JavaScript

実行結果 

JavaScriptユーティ...

ユーザーは内容が途中までしか表示されていないことを認識できます。

ステップバイステップで処理を理解しよう

ステップ1：文字数を確認する


console.log(text.length);
JavaScript

まず現在の文字数を確認します。

ステップ2：上限を超えているか判定する


text.length > maxLength
JavaScript

上限を超えた場合だけ切り詰めます。

ステップ3：一部を取得する


text.substring(0, maxLength)
JavaScript

先頭から指定文字数まで取得します。

ステップ4：省略記号を付与する


text.substring(0, maxLength) + "..."
JavaScript

これで切り詰め表示が完成します。

業務で使えるテンプレート関数

実務では再利用できる関数として定義しておくことをおすすめします。 


/**
 * 文字列を指定文字数で切り詰める
 *
 * @param {string} text 対象文字列
 * @param {number} maxLength 最大文字数
 * @returns {string} 切り詰め後文字列
 */
function truncate(text, maxLength) {

    // nullやundefined対策
    if (text == null) {
        return "";
    }

    // 文字列へ変換
    text = String(text);

    // 上限以内ならそのまま返却
    if (text.length <= maxLength) {
        return text;
    }

    // 切り詰め＋省略記号
    return text.substring(0, maxLength) + "...";
}

// 使用例
console.log(
    truncate(
        "JavaScriptユーティリティ関数完全ガイド",
        15
    )
);
JavaScript

省略記号込みで文字数を制御する方法

初心者の方がよく見落とすポイントがあります。

次のコードでは15文字に切ってから「…」を追加しています。 


text.substring(0, 15) + "..."
JavaScript

実際の表示文字数は18文字になります。

もし最終的な表示長を15文字以内にしたい場合は次のようにします。 


// 最終的に15文字以内へ収める
const result =
    text.length > 15
        ? text.substring(0, 12) + "..."
        : text;
JavaScript

これなら表示全体で15文字になります。

実務でよくある活用例

商品一覧画面


// 商品名を20文字まで表示
const displayName =
    truncate(productName, 20);
JavaScript

長い商品名でも一覧レイアウトが崩れません。

ブログ記事タイトル


// タイトルを30文字で切り詰め
const title =
    truncate(article.title, 30);
JavaScript

記事一覧が見やすくなります。

チャットメッセージプレビュー


// プレビュー表示
const preview =
    truncate(message, 50);
JavaScript

長文メッセージでも表示がコンパクトになります。

検索結果一覧


// 説明文を100文字まで表示
const summary =
    truncate(description, 100);
JavaScript

検索結果画面の可読性が向上します。

情報セキュリティの観点で重要なポイント

切り詰めてもデータはサニタイズされない

文字列を短くしただけでは安全になるわけではありません。

例えば次のような悪意ある入力が含まれていた場合、 

<script>alert('attack')</script>

切り詰めても危険な文字列が残る可能性があります。 


truncate(userInput, 20);
JavaScript

そのため表示時には必ずエスケープ処理やサニタイズ処理を実施してください。

個人情報の漏えいに注意する

氏名やメールアドレスなどを切り詰めて表示する場合、表示途中でも個人情報が含まれる可能性があります。

例えば、 

[email protected]

を20文字に切り詰めても、 

tanaka.taro@example...

のように情報が露出します。

個人情報を扱う場合はマスキング処理との併用を検討しましょう。

絵文字やサロゲートペアに注意する

初心者が知らない落とし穴

JavaScriptのlengthは「見た目の文字数」と一致しない場合があります。

特に絵文字では注意が必要です。 


const text = "😊😊😊";

console.log(text.length);
JavaScript

実行結果 

6

見た目は3文字ですが、内部的には6文字として扱われます。

そのため絵文字を含むサービスでは単純なsubstring()だけでは不自然な切れ方になる可能性があります。

より安全な実装例


/**
 * Unicode対応版
 */
function truncateUnicode(text, maxLength) {

    if (text == null) {
        return "";
    }

    const chars = [...text];

    if (chars.length <= maxLength) {
        return text;
    }

    return chars.slice(0, maxLength).join("") + "...";
}
JavaScript

SNSやチャットシステムなどではこちらの実装を検討するとよいでしょう。

まとめ

文字列を指定文字数で切り詰める処理は、JavaScriptの実務で非常によく利用される文字列操作です。

  • substring()で部分文字列を取得できる
  • 一覧画面や検索画面で頻繁に利用される
  • 「…」を付与すると利用者に分かりやすい
  • 関数化して再利用すると保守性が向上する
  • 絵文字やUnicode文字には注意が必要
  • 切り詰め処理はセキュリティ対策ではない

文字列の切り詰めは単なる見た目の調整だけではありません。ユーザー体験の向上、レイアウト維持、検索結果の可読性向上、システム全体の使いやすさに直結する重要なテクニックです。実務では単純なsubstring()から始め、必要に応じて省略記号対応やUnicode対応まで理解しておくことで、より品質の高いアプリケーションを開発できるようになります。

スポンサーリンク
タイトルとURLをコピーしました