JavaScript Tips | 文字列操作：文字列を省略記号付きで切り詰める

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

文字列を省略記号付きで切り詰めるとは

業務システムやWebアプリケーションでは、長い文字列をそのまま表示すると画面レイアウトが崩れたり、一覧画面の視認性が低下したりすることがあります。

そのため実務では、指定した文字数まで表示し、それ以降は省略記号（…）を付けて表示する処理がよく利用されます。

例えば次のような長いタイトルがあります。 

JavaScriptユーティリティ関数完全ガイド初心者向け解説版

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

JavaScriptユーティリティ関...

利用者は「文字列が途中まで表示されている」ことをすぐに理解できます。

この処理はブログ記事一覧、商品一覧、検索結果画面、チャットアプリ、管理画面など、ほぼすべての業務システムで利用されている重要なテクニックです。

なぜ省略記号付きで切り詰めるのか

単純に文字列を切り取るだけでは、利用者は元の文字列が途中で切れていることに気付きにくい場合があります。

例えば次の2つを比較してみましょう。

単純に切り詰めた場合

JavaScriptユーティリティ関

省略記号を付けた場合

JavaScriptユーティリティ関...

後者の方が「続きが存在する」ことが明確に伝わります。

ユーザー体験（UX）の観点からも、省略記号付きの切り詰めは非常に重要です。

まずはsubstring()を理解しよう

文字列を切り詰める際によく使用するのがsubstring()です。 


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

// 先頭15文字を取得
const result = text.substring(0, 15);

console.log(result);
JavaScript

実行結果 

JavaScriptユーティリ

substring()の仕組み

substring()は文字列の一部を取得するためのメソッドです。 


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

例えば次のコードでは、 


text.substring(0, 15);
JavaScript

0文字目から15文字目の手前まで取得します。

省略記号付き切り詰めの基本実装

実務で最もよく使われる基本形は次の実装です。 


// 最大表示文字数
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 truncateWithEllipsis(text, maxLength) {

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

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

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

    // 文字列切り詰め
    return text.substring(0, maxLength) + "...";
}

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

表示文字数を厳密に管理する方法

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

次のコードの場合、 


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

実際の表示文字数は15文字ではありません。

省略記号3文字が追加されるため、 

15 + 3 = 18文字

になります。

画面幅が厳密に決まっている場合は注意が必要です。

最終的な文字数を固定する方法


function truncateWithEllipsis(text, maxLength) {

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

    text = String(text);

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

    // 省略記号分を差し引く
    return text.substring(0, maxLength - 3) + "...";
}
JavaScript

これなら常に最大文字数以内に収まります。

省略記号を変更する方法

システムによっては「…」以外を利用することがあります。 


// 三点リーダー
text.substring(0, 15) + "…";
JavaScript

// 続きを示す記号
text.substring(0, 15) + "→";
JavaScript

// More表示
text.substring(0, 15) + "[More]";
JavaScript

UIデザイン方針に合わせて選択できます。

実務でよくある活用例

商品一覧画面


// 商品名を20文字まで表示
const displayName =
    truncateWithEllipsis(
        product.name,
        20
    );
JavaScript

長い商品名によるレイアウト崩れを防げます。

お知らせ一覧


// タイトルを30文字まで表示
const title =
    truncateWithEllipsis(
        notice.title,
        30
    );
JavaScript

一覧画面が見やすくなります。

検索結果一覧


// 説明文を50文字で要約表示
const summary =
    truncateWithEllipsis(
        description,
        50
    );
JavaScript

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

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


// 最新メッセージ表示
const preview =
    truncateWithEllipsis(
        message,
        40
    );
JavaScript

長文メッセージでも一覧画面がすっきりします。

Unicode文字と絵文字に注意する

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

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


const text = "😊😊😊";

console.log(text.length);
JavaScript

実行結果 

6

見た目は3文字ですが、内部的には6文字としてカウントされます。

そのためsubstring()で絵文字を切り詰めると、文字化けのような表示になる場合があります。

Unicode対応版テンプレート


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

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

    const chars = [...String(text)];

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

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

SNS、チャット、コメント機能などではこちらの実装が推奨されます。

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

切り詰め処理はセキュリティ対策ではない

文字列を短くしたからといって安全になるわけではありません。

例えば次のような入力があった場合、 

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

切り詰めても危険な文字列は残ります。 


truncateWithEllipsis(
    userInput,
    20
);
JavaScript

表示時は必ずHTMLエスケープやサニタイズを実施してください。

個人情報の表示にも注意する

メールアドレスや電話番号などを切り詰めても、一部の情報は見えてしまいます。 

tanaka.taro@example...

個人情報を扱う場合はマスキング処理を優先しましょう。

まとめ

文字列を省略記号付きで切り詰める処理は、JavaScriptの実務において非常に利用頻度の高いユーティリティです。

  • substring()で部分文字列を取得できる
  • 文字数超過時のみ省略記号を付与する
  • 一覧画面や検索結果画面で頻繁に利用される
  • 共通関数化すると保守性が向上する
  • 省略記号込みの文字数管理に注意する
  • 絵文字やUnicode文字には専用対応を検討する
  • 切り詰め処理はセキュリティ対策ではない

省略記号付きの文字列切り詰めは、一見すると単純な文字列操作に見えるかもしれません。しかし実務では、ユーザー体験の向上、画面レイアウトの維持、一覧表示の可読性向上に大きく貢献する重要な技術です。まずは基本的なsubstring()を理解し、その後にUnicode対応や共通関数化まで習得することで、より実践的なJavaScript開発ができるようになるでしょう。

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