Método JavaScript Array.toLocaleString()

Array 对象参考手册Objeto JavaScript Array

Ejemplo

Formatear a formatos regionales:

const prices = [1234.56, 7890.12, 3456.78]; const dateArray = [new Date(), new Date('2023-01-01')]; //Arreglo de números usando formato localizado console.log(prices.toLocaleString('en-US')); //Salida similar: "1,234.56,7,890.12,3,456.78" (formato en inglés) console.log(prices.toLocaleString('de-DE')); //Salida similar: "1.234,56,7.890,12,3.456,78" (formato en alemán) //Arreglo de fechas usando formato localizado console.log(dateArray.toLocaleString('en-US')); //Salida similar: "5/6/2023, 1/1/2023" (formato de fecha en inglés) console.log(dateArray.toLocaleString('ja-JP')); //Salida similar: "2023/5/6, 2023/1/1" (formato de fecha en japonés)

Pruébalo »

Definición y uso

Array.toLocaleString()Es un método integrado del objeto Array de JavaScript que devuelve una cadena que representa los elementos del arreglo.

Array.toLocaleString()La particularidad del método es que formatea cada elemento del arreglo según la configuración de idioma (locale) del entorno actual.

En pocas palabras, este método:

  • Convierte el arreglo en una cadena
  • Maneja automáticamente formatos localizados (como fechas, números, etc.)
  • Los elementos se separan con comas

Sintaxis básica

array.toLocaleString([locales[, options]])

Descripción de parámetros

  • locales(Opcional): una cadena o un arreglo de cadenas que representa el código de idioma (como "en-US", "zh-CN")
  • options(Opcional): objeto de configuración, utilizado para especificar opciones de formato

Cómo usar

Uso básico

Ejemplo

const numbers = [12345.67, 1000, 3.14159];
console.log(numbers.toLocaleString('en-US'));
// Salida: "12,345.67,1,000,3.142"

console.log(numbers.toLocaleString('de-DE'));
// Salida: "12.345,67,1.000,3,142"

Manejo de objetos de fecha

Ejemplo

const dates = [new Date(), new Date('2023-01-01')];
console.log(dates.toLocaleString('en-US'));
// Salida posible: "1/2/2024, 2:30:45 PM,1/1/2023, 12:00:00 AM"

Uso avanzado

Uso del parámetro options

Ejemplo

const numbers = [12345.67, 1000, 3.14159];

// Especificar formato de moneda
console.log(numbers.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
}));
// Salida: "$12,345.67,$1,000.00,$3.14"

// Especificar formato de porcentaje
console.log([0.25, 0.5, 0.75].toLocaleString('en-US', {
  style: 'percent'
}));
// Salida: "25%,50%,75%"

Diferencia con toString()

Método Procesamiento de localización Formato de fecha Formato de número
toString() Ninguno Convierte a cadena predeterminada Sin tratamiento especial
toLocaleString() tener Según formato local Según formato local

Ejemplo

const arr = [1000, new Date()];

console.log(arr.toString());
// Salida: "1000,Wed Jan 03 2024 14:30:00 GMT+0800 (China Standard Time)"

console.log(arr.toLocaleString('zh-CN'));
// Salida: "1,000,2024/1/3 14:30:00"

Escenarios de aplicación práctica

  1. Sitio web multilingüe: muestra datos formateados según las preferencias de idioma del usuario
  2. Aplicaciones financieras: muestra correctamente los formatos de moneda de diferentes regiones
  3. Análisis de datos: muestra números y fechas en un formato familiar para el usuario
  4. Visualización de formularios: muestra datos con formato localizado en campos de entrada

Consideraciones

  1. Consideraciones de rendimiento: las llamadas frecuentes pueden afectar el rendimiento, especialmente en arreglos grandes
  2. Compatibilidad del navegador: aunque los navegadores modernos lo soportan, algunas opciones pueden variar
  3. Comportamiento predeterminado: si no se especifica el parámetro locales, se utiliza la configuración de idioma predeterminada del entorno de ejecución
  4. Manejo de elementos: para objetos que no son fechas/números, se llamará a su método toString()

Resumen

Array.toLocaleString()Es una poderosa herramienta de localización, especialmente adecuada para escenarios en los que se necesita mostrar datos formateados según la región del usuario. Simplifica la implementación de la internacionalización (i18n), permitiendo a los desarrolladores manejar fácilmente las diferencias de formato de números, fechas, etc., en diferentes regiones.

Recuerda, cuando tu aplicación necesite dirigirse a usuarios globales, ¡usar este método puede mejorar enormemente la experiencia del usuario!

Array 对象参考手册Objeto JavaScript Array

Otras extensiones