For AI agents: the complete documentation index is available at /tc39-atlas/en/llms.txt, the full documentation bundle is available at /tc39-atlas/en/llms-full.txt, and this page is available as Markdown at /tc39-atlas/en/proposals/year/2018/intl-numberformat-prototype-formattoparts.md.
TC39 Atlas
  • English

      • Intl.NumberFormat.prototype.formatToParts S4

      Proposal details
      Proposal overview

      This proposal adds formatToParts methods to Intl.DateTimeFormat and Intl.NumberFormat, enabling localized formatting of string parts for custom styling or manipulation. The proposal addresses the need to access individual components of formatted output (e.g., month, currency) for advanced display. It includes a reference implementation and tests.

      Note

      The README below comes from the upstream repository and may contain outdated stage or status metadata. Use the proposal details above as the current source of truth.

      DateTimeFormat.prototype.formatToParts / NumberFormat.prototype.formatToParts

      Proposal, specs, tests and reference implementation for DateTimeFormat.prototype.formatToParts and NumberFormat.prototype.formatToParts.

      Status

      Stage 4

      Implementation Progress

      • Polyfill
      • Patch for Gecko

      Backpointers

      Authors

      • Caridy Patiño (@caridy)
      • Eric Ferraiuolo (@ericf)
      • Zibi Braniecki (@zbraniecki)

      Reviewers

      TBD

      Informative

      This proposal enables locale aware formatting of strings produced by Intl formatters.

      Usage

      
let dateFormatter = Intl.DateTimeFormat('en', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
let now = new Date();

let dateStr = dateFormatter.formatToParts(now).map(({type, value}) => {
  switch (type) {
    case 'month': return `<b>${value}</b>`;
    default     : return value;
  }
}).reduce((string, part) => string + part);

console.log(dateFormatter.format(now)); // yields "November 23, 2015"
console.log(dateStr); // yields "<b>November</b> 23, 2015"


let numFormatter = Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'EUR',
});
let amount = -1000;

let numStr = numFormatter.formatToParts(amount).map(({type, value}) => {
  switch (type) {
    case 'currency': return `<b>${value}</b>`;
    case 'number'  : return `<i>${value}</i>`;
    default        : return value;
  }
}).reduce((string, part) => string + part);

console.log(numFormatter.format(amount)); // yields "-€1,000.00"
console.log(numStr); // yields "-<b>€</b><i>1,000.00</i>"