【JavaScript】文字列を指定した文字数に省略して末尾に[...]を表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで文字列を指定した文字数に省略して末尾に[...]を表示する方法をご紹介しています。文字列を要素の幅や高さに合わせて制御したい場合に便利な方法です。

上記の疑問にお答えします。

では、解説していきます。

substring()を使用する

substring()はStringオブジェクトのメソッドで、引数に指定した開始～終了位置までの文字列を返します。下記のように引数を指定して文字列を取得します。

str.substring(0, 5);

上記例では文字列の先頭から5文字目までを取得します。配列の添字と同様に先頭は0から始まりますのでご注意ください。

参考：String.prototype.substring() - JavaScript | MDN

substring()で文字列を省略して表示する

substring()で文字列を指定した文字数に省略するサンプルをご紹介します。下記サンプルでは、文字列が20文字以上に場合に省略されます。タイトルに記載してあるように末尾に…を付与した形で出力します。

HTML

<p id="el">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>

JavaScript

const el = document.getElementById('el');
const str = el.textContent;
const len = 20;

if(str.length > len){
    el.textContent = str.substring(0, len)+'...';
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果を確認すると、文字列の20文字目まで表示され、以降は省略表示になっています。出力する文字数に関しましては、実装する環境で変更していただければと思います。

最後に

substring()は開始・終了位置を指定するだけで好きな範囲の文字列を取得することができるメソッドです。

本記事では、文字列を省略する用途としてご紹介しましたが、先頭文字を表示させたくない、指定した記号より前にある文字列を取得したい、といったケースにも使えます。文字列の操作で大活躍するメソッドなので、覚えておくと便利かなと思います。

以上、JavaScriptで文字列を指定した文字数に省略して末尾に[…]を表示する方法のご紹介でした！