「省略文字列」で何をしたいのかをはっきりさせる
ここでの「省略文字列」は、長すぎる文字列を「…」などで途中カットして、画面に収まる形にするユーティリティのことです。
テーブルのカラム幅に収まらないタイトルを「…」で省略したい。
スマホ画面で、長い名前や説明文を1行・2行に収めたい。
ログや一覧では短く、詳細画面ではフルで見せたい。
つまり、「元の文字列はそのまま持っておきつつ、“表示用だけ短くした版”を生成する」のがゴールです。
一番基本の「末尾に … を付けて切る」ユーティリティ
シンプルな省略関数の形
まずは、「最大文字数を超えたら末尾を … にして切る」という一番よくあるパターンからいきます。
function ellipsis(text, maxLength, suffix = "…") {
if (text == null) return "";
const s = String(text);
if (s.length <= maxLength) {
return s;
}
if (maxLength <= suffix.length) {
// 省略記号の方が長い or 同じ長さなら、素直に切るだけ
return s.slice(0, maxLength);
}
const visibleLength = maxLength - suffix.length;
const head = s.slice(0, visibleLength);
return head + suffix;
}
ここが重要ポイントです。
null/undefinedは空文字にしておくと扱いやすい。- もともと短い文字列は、そのまま返す（省略しない）。
maxLengthからsuffixの長さを引いて、「本体として見せられる文字数」を計算する。- その分だけ先頭から切り出して、最後に
suffix（…）を足す。
実際の動きはこうなります。
ellipsis("これはテストです", 10); // "これはテス…"
ellipsis("短い", 10); // "短い"（そのまま）
ellipsis("Very long title here", 10); // "Very lon…"
「とりあえず一覧に収めたい」という用途なら、まずこのレベルで十分です。
先頭を残して「…」を付けるパターン
「後ろの方が大事」なケース
ファイルパスやドメイン名など、「後ろの方が意味を持つ」文字列もあります。
例として、ファイルパスを考えます。
C:\Users\foo\projects\super-long-project-name\src\index.ts
これを単純に末尾を切ると、肝心のファイル名が見えなくなります。
そこで、「末尾を残して、先頭側を省略する」パターンが役に立ちます。
末尾を残して省略するユーティリティ
function ellipsisStart(text, maxLength, prefix = "…") {
if (text == null) return "";
const s = String(text);
if (s.length <= maxLength) {
return s;
}
if (maxLength <= prefix.length) {
return s.slice(-maxLength);
}
const visibleLength = maxLength - prefix.length;
const tail = s.slice(-visibleLength);
return prefix + tail;
}
動きはこうなります。
ellipsisStart("C:\\Users\\foo\\projects\\super-long\\src\\index.ts", 20);
// 例: "…g\\src\\index.ts"
ellipsisStart("example-very-long-domain.com", 15);
// 例: "…g-domain.com"
「最後の部分が重要な文字列」を扱うときに、このパターンを覚えておくと便利です。
真ん中を省略する「前後を少しずつ残す」パターン
「前も後ろも少し見せたい」ケース
パスやIDなどで、「先頭と末尾は見せたいけど、真ん中は省略したい」こともあります。
例えば、長いIDをこう見せたいイメージです。
1234567890abcdef → 1234…cdef
中央省略ユーティリティ
function ellipsisMiddle(text, maxLength, marker = "…") {
if (text == null) return "";
const s = String(text);
if (s.length <= maxLength) {
return s;
}
if (maxLength <= marker.length + 2) {
// 両端を1文字ずつ残す余裕がない場合は、素直に末尾省略にする
return ellipsis(s, maxLength, marker);
}
const remain = maxLength - marker.length;
const headLength = Math.ceil(remain / 2);
const tailLength = Math.floor(remain / 2);
const head = s.slice(0, headLength);
const tail = s.slice(-tailLength);
return head + marker + tail;
}
重要なポイントはここです。
maxLengthからmarker（…）の長さを引いて、「前後で分け合う文字数」を出す。- 前半は
Math.ceil、後半はMath.floorで、合計がぴったり合うようにする。 - 先頭から
headLength文字、末尾からtailLength文字を取り出して、間にmarkerを挟む。
動きはこうなります。
ellipsisMiddle("1234567890abcdef", 10); // 例: "1234…cdef"
ellipsisMiddle("C:\\very\\long\\path\\to\\file.txt", 20);
// 例: "C:\\very…file.txt"
「前後の雰囲気は残したいけど、真ん中はどうでもいい」というときにちょうどいいです。
実務での使いどころと注意点
「省略はあくまで表示用」と割り切る
省略文字列は、必ず「表示用」だけに使うと決めておくのが大事です。
検索や比較、ID の一致判定などに、省略後の文字列を使ってはいけません。
あくまで「元のフルの値」を持っておき、
画面に出す直前だけ ellipsis 系の関数を通す、という構造にしておきます。
これを守らないと、
「省略された文字列同士を比較して、別のものを同じと判定してしまう」
といった事故につながります。
「何文字にするか」は画面ごとに決める
同じ文字列でも、表示する場所によって「ちょうどいい長さ」は変わります。
テーブルのカラム → 20〜30文字くらい
カード型UIのタイトル → 40〜50文字くらい
スマホの1行表示 → 10〜15文字くらい
なので、ユーティリティ側は「省略のロジック」だけを持ち、
「何文字にするか」は呼び出し側（画面側）で決めるのがきれいです。
ちょっとだけ手を動かしてみる
コンソールで、次のあたりを試してみてください。
ellipsis("これはとても長い説明文です。実際の画面では途中までしか見せたくないことがあります。", 20);
ellipsisStart("C:\\Users\\foo\\projects\\super-long-project-name\\src\\index.ts", 25);
ellipsisMiddle("1234567890abcdef", 10);
「どこが残って、どこが … になるか」を目で確認してみてください。
そのうえで、自分のプロジェクトに
export function ellipsis(...) { ... }
export function ellipsisStart(...) { ... }
export function ellipsisMiddle(...) { ... }
の3本を置いて、
- 通常の省略 →
ellipsis - 後ろが大事な文字列 →
ellipsisStart - 前後を少しずつ残したい →
ellipsisMiddle
という使い分けをルール化してみてください。
それだけで、あなたの「省略処理」は
場当たり的な substr 連打から、
意図と見やすさを両立した「省略文字列ユーティリティ」に一段レベルアップします。