Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@jkr_2255

想像以上に遅かったtoLocaleString

数値を3桁区切りにする方法として、Number.prototype.toLocaleStringがありますが()、これにはいくつかの欠点があります。

  1. ロケールを明示しておかないと、思わぬ表記法になってしまう
  2. Safariが未対応
  3. 遅い

サイトのJavaScriptをプロファイリングしている際に偶然気づいたのですが、toLocaleStringで3桁区切りにするコードは、対応したどのブラウザでも、正規表現で同等なことを行うより、数十倍~ひどいときには1000倍の時間を要します。

  // 想像を絶して遅い
  function test1(val) {
    return (+val).toLocaleString('ja');
  }

  // 意外とこっちのほうが高速
  function test2(val) {
        var arr;
        arr = String(val).split('.');
        arr[0] = arr[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        return arr.join('.');
  }

jsPerfで測定してみたところ、ChromeやFirefoxで数倍から数十倍、IEに至っては1000倍の速度差で正規表現で書いたほうが速い、という結果になりました。

結論

toLocaleStringは、本当にロケールに合わせる時以外は不向き

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
18
Help us understand the problem. What is going on with this article?