【JavaScript】任意の文字数で文字列をまるめるメソッドの作り方

こんにちは、”はふぃ”です。

サイトを作成している時などに、表示の都合で長い文字列を途中で省略する必要があることがあります。

これを「文字列をまるめる」というのですが、対象の文字列とまるめる文字数が既知なら以下のようにslice()を使って簡単に実装できます。

// 5文字でまるめて"…"を末尾に
const str = 'abcdefghijklmnopqrstuvwz'
console.log(`${str.slice(0, 5)}…`)

しかし、対象の文字列もまるめる文字数も動的な値で事前にわからない場合がほとんどだと思います。

そのような場合には以下のようなメソッドを作成して利用すると便利です。

const truncateFunc = (str = '', size, suffix = '...') => {
  const strLength = [...str].reduce((sum, char) => {
    return sum + (char.charCodeAt(0) <= 255 ? 0.5 : 1)
  }, 0)
  if (!parseInt(size) || strLength <= size) return str

  const suffixSize = [...suffix].reduce((sum, char) => {
    return sum + (char.charCodeAt(0) <= 255 ? 0.5 : 1)
  }, 0)
  let sum = 0
  let isOver = false
  const resultStr = [...str].filter(char => {
    sum += char.charCodeAt(0) <= 255 ? 0.5 : 1
    if (isOver || sum > size - suffixSize) {
      isOver = true
      return false
    }
    return true
  })
  return `${resultStr.join('')}${suffix}`
}

上のメソッドの特徴は…

• 指定する文字数は全角基準（全角１文字で半角は２文字）
• 空白も含んだ文字数
• suffixも含んだ文字数
• 指定した文字数より入力した文字列の文字数の方が大きかったらそのまま返す

そのためいろんな文字列で試すと以下のようになります。