JavaScriptで文字列から大まかなemを算出する関数

概要

JSを触っていると、table等にデータを表示する機会が何度かあると思います。
その際、「列ごとに一番長い文字列に合わせたい、でもあんまり長くなったら折り返したい」みたいなことはありませんか？
厳密にやるなら、visibility: hidden;を付与した要素に突っ込んでサイズを調べることも出来ますが、件数が多くなってくるとパフォーマンスへの影響が心配になってきます。

そこで、「多少ズレてもいいので、文字列突っ込んだらemを返してほしい」ときに使う関数が欲しくなったので、作りました。

実装

/**
 * @param {string} str - 対象の文字列
 * @param {number} max - 折り返したい文字数
 * @param {number} hanSize - 全角に対する半角のサイズ
 */
const toEM = (str, max = 20, hanSize = 0.5) => {
  const total = str.length;
  const zen = str.replace(/[!-~]/g, '').length; // 半角の文字や記号を潰し、全角の文字数を取得します。
  return Math.min(max, zen + Math.ceil((total - zen) * hanSize)); // 小さくて折返しが発生するのも嫌だったので、桁上げしています。
}

見ての通り、単純に半角と全角を分けてそれぞれの文字数を求めているだけです。
フォントに依存するところがあるので、hanSizeはある程度チューニングしてください。
フォント幅の差が激しい場合は頼りなくなりますが、大体なのでご愛嬌。
折返しが嫌な場合、大きめの半角フォント幅に合わせたほうが安全です。

サンプル

toEM('あいうえおabcde12345'); // => 10
toEM('Qiita'); // => 3
toEM('東京特許許可局'); // => 7