substitute | References | ArcGIS Maps SDK for JavaScript

Types

import type { DateTimeFormatOptions, NumberFormatOptions, SubstituteOptions } from "@arcgis/core/intl/substitute.js";

Type definitions

DateTimeFormatOptions

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

The formatting options for date values.

See also

SubstituteOptions

type

Property

Type: "date"

Since: ArcGIS Maps SDK for JavaScript 5.0

The type of this format. The value is always "date".

intlOptions

Property

Type: Intl.DateTimeFormatOptions | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

The date format options for the Intl.DateTimeFormat object.

Example

const dateFormat = {
  type: "date",
  intlOptions: {
    year: "numeric",
    month: "numeric",
    day: "numeric",
    hour: "numeric",
    minute: "numeric"
  }
};

let data = {
  time: Date.now()
};

intl.substitute("Date: {time}", data, {
  format: {
    time: dateFormat
  }
});

NumberFormatOptions

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

The formatting options for numeric values.

See also

SubstituteOptions

type

Property

Type: "number"

Since: ArcGIS Maps SDK for JavaScript 5.0

The type of this format. The value is always "number".

intlOptions

Property

Type: Intl.NumberFormatOptions | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

The Intl number format options for the Intl.NumberFormat object.

Examples

// Formats a number with a fixed number of fraction digits
const numberFormat = {
  type: "number",
  intlOptions: {
    style: "decimal",
    useGrouping: true,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }
});

let data = {
  value: 10
};

intl.substitute("A number: {value}", data, {
  value: numberFormat
});

// Formats a number as currency, in Euros.
const currencyFormat = {
  type: "number",
  intlOptions: {
    style: "currency",
    currency: "EUR",
    currencyDisplay: "symbol"
  }
};

let data = {
  amount: 14
};

intl.substitute("Amount: {amount}", data, {
  amount: currencyFormat
});

// Formats a number as a percentage.
const percentFormat = {
  type: "number",
  intlOptions: {
    style: "percent"
  }
};

let data = {
  growth: 0.5
};

intl.substitute("Growth: {growth}", data, {
  growth: percentFormat
});

SubstituteOptions

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

An object to specify substitution options.

Use the SubstituteOptions.format property to define the formatting for each value referenced in the string template. format is a key-value pair object. Each key can either be:

a property of the data parameter or substitute()
a named formatter than can be referenced in the template string.

In the following example, the time property from data will be formatted as a date with each component in numeric format.

const data = {
  time: Date.now()
};

intl.substitute("Date: {time}", data, {
  format: {
    time: {
      type: "date",
      intlOptions: {
        year: "numeric",
        month: "numeric",
        day: "numeric",
        hour: "numeric",
        minute: "numeric"
      }
    }
  }
});

The following example uses a named formatter to format the time property twice with different formatting options.

const data = {
  time: Date.now()
};

intl.substitute("In {time:monthFormat} of {time:yearFormat}", data, {
  format: {
    monthFormat: {
      type: "date",
      intlOptions: {
        month: "long"
      }
    },
    yearFormat: {
      type: "date",
      intlOptions: {
        year: "numeric"
      }
    }
  }
});

See also

substitute()

format

Property

Type: Record<string, NumberFormatOptions | DateTimeFormatOptions | undefined> | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

A hashmap of string keys to formatting options.