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

こんにちは、ryohei(@ityryohei)です!

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

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で文字列を指定した文字数に省略して末尾に[…]を表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍