JavaScriptで半角を0.5、全角を1で文字数を計算する方法

JavaScriptで文字数を計算するときはどうしていますか？

よくあるのは文字列のlengthを取得するパターンです。
ですがそれだと半角でも全角でも1文字として計算されてしまいます。

半角は0.5文字、全角は1文字と計算する場合は少し工夫がいるので方法を紹介します。

文字列をループさせて半角全角を判定

単にlengthでは駄目なので文字列を一文字ずつ半角か全角か判定して、文字数用の変数に半角なら0.5全角1を追加していきます。

実装するコードは下記です。

const get2byteLength = (str: string): number => {
  let count: number = 0

  for (let i = 0, len = str.length; i < len; i++) {
    let c = str.charCodeAt(i)

    if (!str[i].match(/\r?\n/g)) { // 改行コード判定
      if (c >= 0x0 && c <= 0x7f) { // 全角半角判定
        count += 0.5
      } else {
        count += 1
      }
    }
  }

  return count
}

このような関数を用意しておくと文字数を取得したいところで下記のようにして使うことができます。

get2byteLength('abcdあいうえお') // 6

文字数の切り上げと切り下げ

半角を0.5文字で計算すると文字数によっては整数にならない場合があります。
用途によって少数点を表示したくないというような場合には切り上げと切り下げをします。

// 切り上げ
Math.ceil(1.5) // 2

// 切り下げ
Math.florr(1.5) // 1

切り上げの場合はMath.ceil、切り下げの場合はMath.floorで整数を取得できます。

実装したコードのまとめ

全角半角を考慮した文字数取得のコードに切り上げ切り下げのコードをあわせることで小数点を表示することなく単にlengthで表示するのとは違う結果を得ることができます。

<Codepen height="265" themeId="0" defaultTab="js,result" user="koojy" slugHash="RzLzje" penTitle="RzLzje">
<span>See the Pen <a href="https://codepen.io/koojy/pen/RzLzje/">
RzLzje</a> by Koji (<a href="https://codepen.io/koojy">@koojy</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</Codepen>