JavaScriptで文字列を切り詰めて末尾に「...」を付ける方法

JavaScriptでは、文字列を指定した最大文字数に合わせて切り詰め、必要に応じて末尾に省略記号「...」を付ける処理が必要になることがあります。本記事では、そのような関数を実装しながら、考え方とコードの動きをわかりやすく解説します。

求められる仕様

今回作成する関数は、第1引数に文字列、第2引数に最大文字数（数値）を受け取ります。そして、次の3つの条件を満たす必要があります。

• 文字列が指定された最大文字数よりも長い場合は切り詰め、末尾に「...」を付けて返します。
• 通常のケースでは、末尾に付ける「...」（3文字）も文字数に含めて計算します。
• ただし、指定された最大文字数が3以下の場合は、「...」を文字数に含めずに切り詰め後の長さを決定します。

実装コード

上記の仕様を満たすコードは次のようになります。

const str1 = 'This is an example string';
const str2 = 'abcdef';

const truncate = (str, len) => {
  if (str.length > len) {
    if (len <= 3) {
      // 最大文字数が3以下のときは「...」を文字数に含めない
      return str.slice(0, len) + '...';
    } else {
      // 「...」の3文字も含めた長さに収める
      return str.slice(0, len - 3) + '...';
    }
  }
  // 切り詰める必要がない場合はそのまま返す
  return str;
};

console.log(truncate(str1, 8));
console.log(truncate(str2, 3));

実行結果

コンソールには次のように出力されます。

This ...
abc...

コードの解説

この実装のポイントを順に見ていきましょう。

• 切り詰めの要否判定： str.length > len で、文字列が最大文字数を超えているかどうかを確認します。超えていなければ、元の文字列をそのまま返します。
• 最大文字数が3以下の場合： str.slice(0, len) で先頭からlen文字を取り出し、その後ろに「...」を連結します。この場合、省略記号は文字数制限にカウントされません。
• 最大文字数が4以上の場合： str.slice(0, len - 3) とすることで、「...」の3文字分をあらかじめ差し引き、省略記号を含めた全体の長さがlen文字に収まるようにしています。

なお、String.prototype.slice() は開始位置と終了位置を指定して部分文字列を取得できるメソッドです。範囲外の指定にも柔軟に対応するため、文字列の切り詰め処理と相性が良く、実務でも広く使われています。