JavaScriptで指定した文字数に文字列を切り詰める方法

JavaScriptでは、長いテキストを一覧表示やプレビュー用に短く表示したい場面がよくあります。この記事では、文字列と数値を受け取り、指定された文字数を超える場合は文字列を切り詰めて末尾に「...」を付けて返す関数の実装方法を解説します。

要件

作成する関数は、文字列と数値の2つの引数を受け取ります。文字列の長さが指定された数値より大きい場合は、先頭から指定文字数分だけ切り取った文字列に「...」を連結して返します。切り詰める必要がない場合（元の文字列が指定文字数以下の場合）は、元の文字列をそのまま返します。

コード例

以下がその実装コードです。

const str = 'Testing String';
const num = 8;
const limitString = (str = '', num = 1) => {
    const { length: len } = str;
    if(num < len){
        return str.slice(0, num) + '...';
    }else{
        return str;
    };
};
console.log(limitString(str, num));

コードのポイント

この関数では、分割代入を使って文字列の長さをlenとして取得しています。条件分岐により、指定文字数が実際の長さ未満の場合のみslice()メソッドで文字列を切り取り、省略記号「...」を付加します。slice(0, num)はインデックス0からnum番目の手前までを抽出するため、正確に指定文字数分の文字列が得られます。

出力結果

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

Testing ...

元の文字列「Testing String」（14文字）は指定された8文字より長いため、先頭8文字「Testing 」が切り取られ、末尾に「...」が付いて出力されています。