Format Number
Formats a number using the specified locale and options.
Localization is handled by the browser's Intl.NumberFormat API. No language packs are required.
val valueVar = Var("1000")div( cls := "format-number-overview", p(FormatNumber(_.value <-- valueVar.signal.map(_.toDouble))()), Input( _.`type`.number, _.value <-- valueVar, _.label := "Number to Format" )( onInput.mapToValue --> valueVar, maxWidth.px(180) ))Examples
Percentages
To get the value as a percent, set the type attribute to percent.
FormatNumber(_.`type`.percent, _.value := 0)()FormatNumber(_.`type`.percent, _.value := 0.25)()FormatNumber(_.`type`.percent, _.value := 0.50)()FormatNumber(_.`type`.percent, _.value := 0.75)()FormatNumber(_.`type`.percent, _.value := 1)()Currency
To format a number as a monetary value, set the type attribute to currency and set the currency attribute to the desired ISO 4217 currency code. You should also specify lang to ensure the the number is formatted correctly for the target locale.
div("USD: ", FormatNumber(_.`type`.currency, _.currency := "USD", _.value := 2000)())div("GBP: ", FormatNumber(_.`type`.currency, _.currency := "GBP", _.value := 2000)())div("EUR: ", FormatNumber(_.`type`.currency, _.currency := "EUR", _.value := 2000)())div("JPY: ", FormatNumber(_.`type`.currency, _.currency := "JPY", _.value := 2000)())div("CNY: ", FormatNumber(_.`type`.currency, _.currency := "CNY", _.value := 2000)())Fraction Digits
Use minimum-fraction-digits and maximum-fraction-digits to control decimal precision.
div("Default: ", FormatNumber(_.value := 3.14159)())div("Min 2 digits: ", FormatNumber(_.value := 3.14159, _.minimumFractionDigits := 2.0)())div("Max 2 digits: ", FormatNumber(_.value := 3.14159, _.maximumFractionDigits := 2.0)())div( "Min 0, Max 0: ", FormatNumber(_.value := 3.14159, _.minimumFractionDigits := 0.0, _.maximumFractionDigits := 0.0)())Grouping Separators
Use the without-grouping attribute to turn off grouping separators.
div("With grouping: ", FormatNumber(_.value := 1000000)())div("Without grouping: ", FormatNumber(_.value := 1000000, _.withoutGrouping := true)())