Format Number

<pc-format-number>

1.0.0-alpha.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Formats a number using the specified locale and options.

Localisation is handled by the browser’s Intl.DateTimeFormat API. No language packs are required.

<div class="format-number-overview">
    <pc-format-number value="1000"></pc-format-number>

    <br /><br />

    <pc-input
        label="Number to format"
        type="number"
        value="1000"
        style="max-inline-size: 180px"
    ></pc-input>
</div>

<script>
    const container = document.querySelector(".format-number-overview");
    const formatter = container.querySelector("pc-format-number");
    const input = container.querySelector("pc-input");

    input.addEventListener("pc-input", () => (formatter.value = input.value || 0));
</script>

Code

Edit

Demos

Percentages

To get the value as a percentage, set the type attribute to percent.

<pc-format-number type="percent" value="0"></pc-format-number>
<br />
<pc-format-number type="percent" value="0.5"></pc-format-number>
<br />
<pc-format-number type="percent" value="0.75"></pc-format-number>
<br />
<pc-format-number type="percent" value="1"></pc-format-number>

Code

Edit

Localisation

Use the lang attribute to set the number formatting locale.

English: <pc-format-number value="2000" lang="en" minimum-fraction-digits="2"></pc-format-number>
<br />
German: <pc-format-number value="2000" lang="de" minimum-fraction-digits="2"></pc-format-number>
<br />
French: <pc-format-number value="2000" lang="fr" minimum-fraction-digits="2"></pc-format-number>

Code

Edit

SI conventions

Add the use-si attribute to change the formatting of the component to follow SI conventions.

This property is experimental and does not work on currencies.

<strong>With local conventions</strong><br />
<pc-format-number value="1000"></pc-format-number>
<br />
<pc-format-number value="1234567.89"></pc-format-number>

<br /><br />

<strong>With SI conventions</strong><br />
<pc-format-number value="1000" use-si></pc-format-number>
<br />
<pc-format-number value="1234567.89" use-si></pc-format-number>

Code

Edit

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 the lang attribute to ensure that the number and currency symbol is formatted correctly for the target locale.

<pc-format-number type="currency" currency="USD" value="2000" lang="en-US"></pc-format-number>
<br />
<pc-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></pc-format-number>
<br />
<pc-format-number type="currency" currency="EUR" value="2000" lang="de"></pc-format-number>
<br />
<pc-format-number type="currency" currency="RUB" value="2000" lang="ru"></pc-format-number>
<br />
<pc-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></pc-format-number>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`value`	The number to format. Typ: `number`	`0`
`type`	The formatting style to use. Typ: `"currency" \| "decimal" \| "percent"`	`"decimal"`
`withoutGrouping` `without-grouping`	Turns off grouping separators. Typ: `boolean`	`false`
`currency`	The ISO 4217 currency code to use when formatting. Typ: `string`	`"USD"`
`currencyDisplay` `currency-display`	Specifies how to display the currency. Typ: `"symbol" \| "narrowSymbol" \| "code" \| "name"`	`"symbol"`
`minimumIntegerDigits` `minimum-integer-digits`	The minimum number of integer digits to use. Possible values are 1–21. Typ: `number \| undefined`	‐
`minimumFractionDigits` `minimum-fraction-digits`	The minimum number of fraction digits to use. Possible values are 0–100. Typ: `number \| undefined`	‐
`maximumFractionDigits` `maximum-fraction-digits`	The maximum number of fraction digits to use. Possible values are 0–100. Typ: `number \| undefined`	‐
`minimumSignificantDigits` `minimum-significant-digits`	The minimum number of significant digits to use. Possible values are 1–21. Typ: `number \| undefined`	‐
`maximumSignificantDigits` `maximum-significant-digits`	The maximum number of significant digits to use,. Possible values are 1–21. Typ: `number \| undefined`	‐
`useSI` `use-si`	Forces the component to use the SI standard for formatting. This overrides locale‐specific rules. Typ: `boolean`	`false`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-number/format-number.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/format-number/format-number.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/format-number/format-number.js";