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で表示するのとは違う結果を得ることができます。

See the Pen RzLzje by Koji (@koojy) on CodePen.

この記事をシェアする
この記事のタイトルとURLをコピーする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。