Goal: Implement encapsulation of thousandth separator tool

NumberFormat
Create a numeric formatted object

constructor(locale: string | Array, options?: NumberOptions)

locale： A string representing regional information, consisting of language, script, country, or region.
options： The configuration items that can be set when creating a numeric formatted object.
Example

//Create a NumberFormat object using the en-GB local with style set to decimal and notation set to scientific
let numfmt = new intl.NumberFormat("en-GB", {style:'decimal', notation:"scientific"});

interface

format(number: number): string//Format a numeric string.
resolvedOptions(): NumberOptions//Get the configuration items set when creating a numeric formatted object.

NumberOptions： The configuration item set when creating a numeric formatted object.

  • Local: Regional parameters, such as: "zh-Hans-CN"。 The default value of the 'local' property is the current 'local' of the system.
  • Currency: a unit of currency that conforms to the ISO-4217 standard, such as "EUR", "CNY", "USD", etc.
  • CurrencySign: Symbol display for currency units, with values including: "standard"，"accounting"。 The default value is standard.
  • Currency Display: The display method of currency, with values including: "symbol", "narrowSymbol", "code", "name"。 The default value is symbol.
  • Unit: Unit name, such as "meter", "inch", "hectare", etc.
  • UnitDisplay: The display format of units, with values including: "long", "short", "narrow"。 The default value is short.
  • UnitUsage: The usage scenario of the unit, with a default value of default.
  • SignDisplay: The display format of numerical symbols, with values including: "auto"： Automatically determine whether positive and negative symbols are displayed; "never"： Do not display positive or negative signs; "always"： Always display positive and negative signs; "exceptZero"： All display signs except for 0. The default value is auto.
  • CompactDisplay: A compact display format with values including: "long", "short"。 The default value is short.
  • Notation: The formatting specification for numbers, with values including: "standard", "scientific", "engineering", "compact"。 The default value is standard.

actual combat

export class NumberKit {
  /**
   * 千位分隔符格式化金钱，并只保留两位小数
   * @param money
   * @returns
   */
  static formatMoney(money: number): string {
    /**
     * 创建一个 Intl.NumberFormat 对象，指定语言和选项
     * 用途：格式化数字为英文风格的金融数字，千分分隔符,
     */
    const formatter = new Intl.NumberFormat('en-US', {
      style: 'decimal', // 使用十进制风格
      minimumFractionDigits: 2, // 最小小数位数
      maximumFractionDigits: 2, // 最大小数位数
      useGrouping: true // 启用分组（即每三位用逗号分隔）
    });
    return formatter.format(money)
  }

  /**
   * 千位分隔符，小数不变
   * ###待完善：根据数字小数位数，保留全部位数
   * @param num
   * @returns
   */
  static thousandsSeparator(num: number) {
    const formatter = new Intl.NumberFormat('en-US', {
      // style: 'decimal', // 使用十进制风格
      minimumFractionDigits: 9, // 最小小数位数
      maximumFractionDigits: 9, // 最大小数位数
      useGrouping: true // 启用分组（即每三位用逗号分隔）
    });
    return formatter.format(num)
  }

  /**
   * 判断是否是数值
   * @param value
   */
  static processNumber(value: number | string) {
    if (typeof value === "number") {
      console.log(value.toFixed(2));
    } else {
      console.log("Not a number");
    }
  }
}

use

@Entry
@Component
struct Index {
  @State message: string = '千分分隔符';

  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
      Text(NumberKit.formatMoney(456781.2365))
      Text(NumberKit.thousandsSeparator(456781.2365))
    }
    .height('100%')
    .width('100%')
  }
}