Cómo extraer idioma, país y script de una configuración regional

Usa JavaScript para analizar identificadores de configuración regional y acceder a sus componentes individuales

Introducción

Los identificadores de configuración regional como en-US, fr-CA y zh-Hans-CN codifican múltiples piezas de información en una sola cadena. Estos componentes indican el idioma que se está utilizando, la región donde se habla y, a veces, el sistema de escritura.

Al crear aplicaciones internacionalizadas, a menudo necesitas extraer estos componentes individuales. Es posible que desees mostrar solo el nombre del idioma a los usuarios, agrupar configuraciones regionales por región o verificar qué script utiliza una configuración regional. En lugar de analizar cadenas manualmente con expresiones regulares, JavaScript proporciona la API Intl.Locale para extraer componentes de manera confiable.

Esta guía explica qué componentes existen en los identificadores de configuración regional, cómo extraerlos usando la API Intl.Locale y cuándo necesitarías usar estos componentes en la práctica.

Qué componentes existen en los identificadores de configuración regional

Los identificadores de configuración regional siguen el estándar BCP 47, que define una estructura para describir idiomas y variaciones regionales. Un identificador de configuración regional completo puede contener varios componentes separados por guiones.

Los tres componentes más comunes son:

  • Idioma: el idioma principal que se está utilizando, como inglés, español o chino
  • Región: el área geográfica donde se usa el idioma, como Estados Unidos, Canadá o China
  • Script: el sistema de escritura utilizado para representar el idioma, como caracteres latinos, cirílicos o han

Un identificador de configuración regional simple contiene solo un código de idioma:

en

La mayoría de los identificadores de configuración regional incluyen un idioma y una región:

en-US
fr-CA
es-MX

Algunos identificadores de configuración regional incluyen un script cuando el idioma se puede escribir en múltiples sistemas de escritura:

zh-Hans-CN
zh-Hant-TW
sr-Cyrl-RS
sr-Latn-RS

Comprender estos componentes te ayuda a tomar decisiones sobre el respaldo de idiomas, la selección de contenido y la personalización de la interfaz de usuario.

Usar Intl.Locale para extraer componentes

La API Intl.Locale convierte cadenas de identificadores de configuración regional en objetos estructurados. Una vez que creas un objeto de configuración regional, puedes leer sus componentes a través de propiedades.

Crea un objeto de configuración regional pasando el identificador al constructor:

const locale = new Intl.Locale("en-US");

console.log(locale.language); // "en"
console.log(locale.region); // "US"

El objeto de configuración regional expone propiedades que corresponden a cada componente del identificador. Estas propiedades proporcionan acceso estructurado sin requerir análisis de cadenas.

Extraer el código de idioma

La propiedad language devuelve el componente de idioma del identificador de configuración regional. Este es el código de dos o tres letras que identifica el idioma principal.

const english = new Intl.Locale("en-US");
console.log(english.language); // "en"

const french = new Intl.Locale("fr-CA");
console.log(french.language); // "fr"

const chinese = new Intl.Locale("zh-Hans-CN");
console.log(chinese.language); // "zh"

Los códigos de idioma siguen el estándar ISO 639. Los códigos comunes incluyen en para inglés, es para español, fr para francés, de para alemán, ja para japonés y zh para chino.

El código de idioma siempre está presente en un identificador de configuración regional válido. Es el único componente obligatorio.

const languageOnly = new Intl.Locale("ja");
console.log(languageOnly.language); // "ja"
console.log(languageOnly.region); // undefined

Cuando extraes el código de idioma, puedes usarlo para seleccionar traducciones, determinar reglas de procesamiento de texto o crear selectores de idioma para los usuarios.

Extraer el código de región

La propiedad region devuelve el componente de región del identificador de configuración regional. Este es el código de dos letras que identifica el área geográfica donde se utiliza el idioma.

const americanEnglish = new Intl.Locale("en-US");
console.log(americanEnglish.region); // "US"

const britishEnglish = new Intl.Locale("en-GB");
console.log(britishEnglish.region); // "GB"

const canadianFrench = new Intl.Locale("fr-CA");
console.log(canadianFrench.region); // "CA"

Los códigos de región siguen el estándar ISO 3166-1. Utilizan dos letras mayúsculas para representar países y territorios. Los códigos comunes incluyen US para Estados Unidos, GB para Reino Unido, CA para Canadá, MX para México, FR para Francia y CN para China.

El código de región cambia cómo se formatean las fechas, números y monedas. El inglés americano usa fechas mes-día-año y puntos para separadores decimales. El inglés británico usa fechas día-mes-año y comas para separadores de miles.

Los códigos de región son opcionales en los identificadores de configuración regional. Cuando una configuración regional no tiene región, la propiedad region devuelve undefined:

const genericSpanish = new Intl.Locale("es");
console.log(genericSpanish.region); // undefined

Cuando extraes el código de región, puedes usarlo para personalizar el formato regional, seleccionar contenido específico de la región o mostrar información de ubicación a los usuarios.

Extracción del código de escritura

La propiedad script devuelve el componente de escritura del identificador de configuración regional. Este es el código de cuatro letras que identifica el sistema de escritura utilizado para representar el idioma.

const simplifiedChinese = new Intl.Locale("zh-Hans-CN");
console.log(simplifiedChinese.script); // "Hans"

const traditionalChinese = new Intl.Locale("zh-Hant-TW");
console.log(traditionalChinese.script); // "Hant"

const serbianCyrillic = new Intl.Locale("sr-Cyrl-RS");
console.log(serbianCyrillic.script); // "Cyrl"

const serbianLatin = new Intl.Locale("sr-Latn-RS");
console.log(serbianLatin.script); // "Latn"

Los códigos de escritura siguen el estándar ISO 15924. Usan cuatro letras con la primera letra en mayúscula. Los códigos comunes incluyen Latn para escritura latina, Cyrl para escritura cirílica, Hans para caracteres Han simplificados, Hant para caracteres Han tradicionales y Arab para escritura árabe.

La mayoría de las configuraciones regionales omiten el código de escritura porque cada idioma tiene un sistema de escritura predeterminado. El inglés usa por defecto la escritura latina, por lo que se escribe en en lugar de en-Latn. El ruso usa por defecto el cirílico, por lo que se escribe ru en lugar de ru-Cyrl.

Los códigos de escritura aparecen cuando un idioma puede escribirse de múltiples formas. El chino usa caracteres tanto simplificados como tradicionales. El serbio usa alfabetos tanto cirílico como latino. En estos casos, el código de escritura desambigua qué sistema de escritura usar.

Cuando la configuración regional no tiene un código de escritura explícito, la propiedad script devuelve undefined:

const english = new Intl.Locale("en-US");
console.log(english.script); // undefined

Cuando extraes el código de escritura, puedes usarlo para seleccionar fuentes, determinar el renderizado de texto o filtrar contenido por sistema de escritura.

Comprender cuándo los componentes son undefined

No todos los identificadores de configuración regional incluyen todos los componentes. El código de idioma es obligatorio, pero la región y el script son opcionales.

Cuando un componente no está presente en el identificador, la propiedad correspondiente devuelve undefined:

const locale = new Intl.Locale("fr");

console.log(locale.language); // "fr"
console.log(locale.region); // undefined
console.log(locale.script); // undefined

Este comportamiento te permite verificar si una configuración regional especifica una región o script antes de usar esos valores:

const locale = new Intl.Locale("en-US");

if (locale.region) {
  console.log(`Region-specific formatting for ${locale.region}`);
} else {
  console.log("Using default formatting");
}

Puedes usar el operador de fusión nula para proporcionar valores predeterminados:

const locale = new Intl.Locale("es");
const region = locale.region ?? "ES";

console.log(region); // "ES"

Al construir cadenas de respaldo de configuración regional, verificar componentes undefined te ayuda a construir alternativas:

function buildFallbackChain(identifier) {
  const locale = new Intl.Locale(identifier);
  const fallbacks = [identifier];

  if (locale.region) {
    fallbacks.push(locale.language);
  }

  return fallbacks;
}

console.log(buildFallbackChain("fr-CA")); // ["fr-CA", "fr"]
console.log(buildFallbackChain("fr")); // ["fr"]

Esto crea una lista de identificadores de configuración regional ordenados de más específico a más general.

Casos de uso prácticos para extraer componentes

Extraer componentes de configuración regional resuelve varios problemas comunes al construir aplicaciones internacionalizadas.

Agrupar configuraciones regionales por idioma

Al mostrar una lista de idiomas disponibles, agrupa las configuraciones regionales que comparten el mismo código de idioma:

const locales = ["en-US", "en-GB", "fr-FR", "fr-CA", "es-ES", "es-MX"];

const grouped = locales.reduce((groups, identifier) => {
  const locale = new Intl.Locale(identifier);
  const language = locale.language;

  if (!groups[language]) {
    groups[language] = [];
  }

  groups[language].push(identifier);
  return groups;
}, {});

console.log(grouped);
// {
//   en: ["en-US", "en-GB"],
//   fr: ["fr-FR", "fr-CA"],
//   es: ["es-ES", "es-MX"]
// }

Esta organización ayuda a los usuarios a encontrar su variación regional preferida dentro de un idioma.

Construir selectores de configuración regional

Al construir una interfaz de usuario para la selección de idioma, extrae componentes para mostrar etiquetas significativas:

function buildLocaleSelector(identifiers) {
  return identifiers.map(identifier => {
    const locale = new Intl.Locale(identifier);

    const languageNames = new Intl.DisplayNames([identifier], {
      type: "language"
    });

    const regionNames = new Intl.DisplayNames([identifier], {
      type: "region"
    });

    return {
      value: identifier,
      language: languageNames.of(locale.language),
      region: locale.region ? regionNames.of(locale.region) : null
    };
  });
}

const options = buildLocaleSelector(["en-US", "en-GB", "fr-FR"]);
console.log(options);
// [
//   { value: "en-US", language: "English", region: "United States" },
//   { value: "en-GB", language: "English", region: "United Kingdom" },
//   { value: "fr-FR", language: "French", region: "France" }
// ]

Esto proporciona etiquetas legibles para cada opción de configuración regional.

Filtrar por región

Cuando necesitas mostrar contenido específico de una región, extrae el código de región para filtrar configuraciones regionales:

function filterByRegion(identifiers, targetRegion) {
  return identifiers.filter(identifier => {
    const locale = new Intl.Locale(identifier);
    return locale.region === targetRegion;
  });
}

const allLocales = ["en-US", "es-US", "en-GB", "fr-FR", "zh-CN"];
const usLocales = filterByRegion(allLocales, "US");

console.log(usLocales); // ["en-US", "es-US"]

Esto te ayuda a seleccionar configuraciones regionales apropiadas para usuarios en un país específico.

Comprobación de compatibilidad de escritura

Al seleccionar fuentes o renderizar texto, comprueba la escritura para garantizar la compatibilidad:

function selectFont(identifier) {
  const locale = new Intl.Locale(identifier);
  const script = locale.script;

  if (script === "Hans" || script === "Hant") {
    return "Noto Sans CJK";
  } else if (script === "Arab") {
    return "Noto Sans Arabic";
  } else if (script === "Cyrl") {
    return "Noto Sans";
  } else {
    return "Noto Sans";
  }
}

console.log(selectFont("zh-Hans-CN")); // "Noto Sans CJK"
console.log(selectFont("ar-SA")); // "Noto Sans Arabic"
console.log(selectFont("en-US")); // "Noto Sans"

Esto garantiza que el texto se renderice correctamente para cada sistema de escritura.

Implementación de idioma de respaldo

Cuando el idioma preferido del usuario no está disponible, recurre al idioma base:

function selectBestLocale(userPreference, supportedLocales) {
  const user = new Intl.Locale(userPreference);

  if (supportedLocales.includes(userPreference)) {
    return userPreference;
  }

  const languageMatch = supportedLocales.find(supported => {
    const locale = new Intl.Locale(supported);
    return locale.language === user.language;
  });

  if (languageMatch) {
    return languageMatch;
  }

  return supportedLocales[0];
}

const supported = ["en-US", "fr-FR", "es-ES"];

console.log(selectBestLocale("en-GB", supported)); // "en-US"
console.log(selectBestLocale("fr-CA", supported)); // "fr-FR"
console.log(selectBestLocale("de-DE", supported)); // "en-US"

Esto proporciona un respaldo elegante cuando no hay coincidencias exactas disponibles.