• [Javascript] Number, toLocaleString() & Intl


    When needing to format a number I've tended to lean towards Number.prototype.toFixed(), reach for a 3rd party library, or write custom functions. However, with modern browsers, there's a lot of really interesting native capabilities you could start using with Number.prototype.toLocaleString()or Intl.NumberFormat.

    import "@formatjs/intl-numberformat/polyfill";
    import "@formatjs/intl-numberformat/locale-data/en.js";
    
    let number = 12345.6789;
    
    // Locale
    console.log(number.toLocaleString()); // 12,345.679 
    console.log(number.toLocaleString("en-US")); // 12,345.679 
    console.log(number.toLocaleString("de-DE")); // 12.345,679 
    
    // Currency
    console.log(
      number.toLocaleString("en-US", {
        style: "currency",
        currency: "USD"
      })
    ); // $12,345.68 
    console.log(
      number.toLocaleString("de-DE", {
        style: "currency",
        currency: "EUR"
      })
    ); // 12.345,68 € 
    console.log(
      number.toLocaleString("ja-JP", {
        style: "currency",
        currency: "JPY"
      })
    ); // ¥12,346 
    
    // Significant Digits
    console.log(
      number.toLocaleString("en-US", {
        maximumSignificantDigits: 1
      })
    ); // 10,000 
    console.log(
      number.toLocaleString("fr-FR", {
        maximumSignificantDigits: 3
      })
    ); // 12 300 
    
    // Unit Support
    console.log(
      number.toLocaleString("en-US", {
        style: "unit",
        unit: "mile-per-hour"
      })
    ); // 12,345.679 mph 
    console.log(
      number.toLocaleString("fr-FR", {
        style: "unit",
        unit: "liter",
        unitDisplay: "long"
      })
    ); // 12 345,679 litres 
    
    // Compact Notation
    console.log(
      number.toLocaleString("en-US", {
        notation: "compact",
        compactDisplay: "long"
      })
    ); // 12 thousand 
    
    // Percents
    number = 0.1234;
    console.log(
      number.toLocaleString("en-US", {
        style: "percent",
        minimumFractionDigits: 2
      })
    ); // 12.34%
    
    // Accounting
    number = -123.456;
    console.log(
      number.toLocaleString("en-US", {
        style: "currency",
        currency: "USD",
        currencySign: "accounting",
        signDisplay: "always"
      })
    ); // ($123.46) 
    
    // Intl.NumberFormat
    const numberFormat = new Intl.NumberFormat("en-US", {
      style: "unit",
      unit: "mile-per-hour"
    });
    console.log(numberFormat.format(12345.6789)); // 12,345.679 mph 
    console.log(numberFormat.format(765456.5468)); // 765,456.547 mph 
  • 相关阅读:
    [D3] 4. d3.max
    [D3] 3. Scaling Basics
    [D3] 2. Basics of SVG
    [PHP] find ascii code in string
    [PHP] csv to xml
    [AngularJS] angular-formly: Extending Types
    [R] Draw a wordcloud
    [AngularJS] Error: $location:nobase
    [Whole Web] [Node.js, PM2] Controlling runaway apps using pm2
    Runoob-Java-高级教程-实例-环境设置实例:3.Java 实例
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13470234.html
Copyright © 2020-2023  润新知