Primeiro, primeiro entenda o objeto Internacional como um todo
O objeto Intl é o namespace da API de internacionalização ECMAScript. Ele fornece comparação de strings de acordo com o idioma, oferece suporte à formatação de números e de data e hora.
Quando entrarmos em Intl no console, obteremos o valor de retorno conforme mostrado abaixo:
do seguinte modo:
{
Collator: ƒ Collator ()
DateTimeFormat: ƒ DateTimeFormat ()
ListFormat: ƒ ListFormat ()
NumberFormat: ƒ NumberFormat ()
PluralRules: ƒ PluralRules ()
RelativeTimeFormat: ƒ RelativeTimeFormat ()
getCanonicalLocales: ƒ getCanonicalLocales ()
v8BreakIterator: ƒ v8BreakIterator ()
}
Objetos internacionais são suportados a partir do IE11 +, e alguns dos métodos de propriedade são atualmente suportados apenas pelo navegador Chrome, como ListFormat.
Vamos entender um por um (Intl.v8BreakIterator não tem documentação relevante, ignore-o por enquanto).
Dois, objeto Intl.Collator
A palavra classificador significa classificador. O objeto Intl.Collator é o construtor do classificador e pode oferecer suporte à comparação de string sensível ao idioma.
A sintaxe é a seguinte:
novo Intl.Collator ([locales [, opções]])
O parâmetro localesé um parâmetro opcional e o valor é uma string de tags de idioma BCF 47 (o feedback dos comentários deve ser a extensão de tag de tags na especificação bcf47, formato unicode) ou uma matriz dessas strings. optionsTambém é um parâmetro opcional e suporta muitos valores de entrada. Como não é o foco deste artigo, não será expandido. Se você estiver interessado, pode visualizar o documento aqui .
Instância de Collator herdada de seu protótipo compare()e resolvedOptions()desses dois métodos, nossa principal preocupação compare()este método pode ser usado para comparação de strings, o valor de retorno é igual a 0, na frente de grandes retornos, valor negativo, o valor retornado na frente do pequeno inteiro.
Este método pode ser visto como String.prototype.localeCompare()uma versão completamente nova do método localese os optionsparâmetros também são muito semelhantes.
compare()O método é usado principalmente para comparar strings em diferentes idiomas. Por exemplo, em alemão, ä e a são classificados na mesma ordem, mas em sueco, ä é classificado após a letra z, então:
// Em alemão, ä e a estão na mesma ordem
console.log (novo Intl.Collator ('de'). compare ('ä', 'z'));
// retorna um valor negativo
// Em sueco, ä vem depois da letra z
console.log (novo Intl.Collator ('sv'). compare ('ä', 'z'));
// retorna um valor positivo
No entanto, somos todos usuários chineses e o cenário acima não é usado. O objeto Intl.Collator tem valor prático? Há sim.
O parâmetro opcional de opções é numeric, atributo booleano, se comparar de acordo com o valor, o padrão é false, você se lembra do seguinte problema clássico de classificação de string numérica:
['15', '2', '100']. Sort (); // O resultado é: ["100", "15", "2"]
Porque as sequências de números são organizadas em ordem de sequência.
A seguir, usamos o parâmetro de classificação numérico do objeto Intl.Collator para transformar, e a string final é classificada de acordo com o valor literal da string:
['15', '2', '100']. Sort (new Intl.Collator (undefined, {numeric: true}). Compare);
// O resultado é: ["2", "15", "100"]
Por exemplo, uma captura de tela dos resultados do console:
Em seguida, falamos sobre a classificação de chinês. O que devemos fazer se quisermos que nosso chinês seja classificado de acordo com o pinyin inicial?
var arrUsername = ["Chen Kun", "Deng Chao", "Du Chun", "Feng Shaofeng", "Han Geng", "Hu Ge", "Huang Xiaoming", "Jia Nailiang", "Li Chen", " Li Yifeng "," Luhan "," Jing Boran "," Liu Ye "," Lu Yi "," Sun Honglei "];
Realizamos a sort()classificação padrão no arrUsername acima , e o resultado é o seguinte:
arrUsername.sort (); // O resultado é: ["Jing Boran", "Feng Shaofeng", "Liu Ye", "Sun Honglei", "Li Yifeng", "Li Chen", "Du Chun", "Hu Ge", "Jia Nailiang "," Deng Chao "," "Lu Yi", "Chen Kun", "Han Geng", "Lu Han", "Huang Xiaoming"]
A ordem está errada.
Neste ponto, você pode usar a string de tag de idioma chinês BCF 47 simplificada zhpara classificar, o código é o seguinte:
arrUsername.sort (novo Intl.Collator ('zh'). compare);
// O resultado é: ["Chen Kun", "Deng Chao", "Du Chun", "Feng Shaofeng", "Han Geng", "Hu Ge", "Huang Xiaoming", "Jia Nailiang", "Jing Boran "," Li Chen "," "Li Yifeng", "Liu Ye", "Lu Yi", "Lu Han", "Sun Honglei"]
Três, objeto Intl.DateTimeFormat
Na verdade, pode ser visto como uma modificação dos seguintes métodos tradicionais:
Date.prototype.toLocaleString ()
Date.prototype.toLocaleDateString ()
Date.prototype.toLocaleTimeString ()
A sintaxe é a seguinte:
new Intl.DateTimeFormat ([locales [, options]])
localesÉ um parâmetro opcional. Tem o mesmo significado que o objeto Intl.Collator. Refere-se à string BCP 47 correspondente ao país e à região. Os detalhes específicos são muito responsáveis e não serão expandidos. Apenas zh-*o tipo atrás do chinês não pode ser contado. optionsTambém é um parâmetro opcional, você pode especificar o tipo de data, fuso horário e o método de apresentação de ano, mês, dia, hora, minuto e segundo (como adicionar 0) e exibir em 24 horas formato.
Resumindo, podemos personalizar o formato da hora que queremos apresentar.
Por exemplo, o formato das informações de data que queremos exibir é: "xxxx ano xx mês xx dia xx: xx: xx".
Então, podemos defini-lo assim:
new Intl.DateTimeFormat ('zh', {
ano: 'numérico',
mês: '2 dígitos',
dia: '2 dígitos',
hora: '2 dígitos',
minuto: '2 dígitos',
segundo: '2 dígitos',
hour12: false
}). formato (nova data ())
O '2-digit'que significa que ele deve usar 2 dígitos, então se o valor não exceder 10, ele adicionará automaticamente 0 na frente. hour12Defina para falseindicar que usamos um relógio de 24 horas, portanto, a noite será 21h em vez de 21h.
Vejamos o efeito no navegador IE11:
Atendeu totalmente às nossas expectativas, mas no navegador Chrome e no navegador Firefox, não é o ano, mês e dia chinês, mas a barra:
É necessário mais processamento de caracteres ou há outras maneiras de fazer os navegadores Chrome e Firefox exibirem o mesmo ano, mês e dia em chinês que o IE, por favor, esclareça-me.
Quatro, objeto Intl.ListFormat
Intl.ListFormat permite a formatação de listas sensíveis ao idioma.
A sintaxe é a seguinte:
new Intl.ListFormat ([locales [, options]])
localesOu seja, 'zh-Hans'ou 'en-US'como caracteres, optionstambém parâmetros opcionais, para oferecer suporte aos três seguintes:
localeMatcherRefere-se ao algoritmo de correspondência.typeTipo de conexão de conteúdo de valor. Sim'conjunction'significa A, B e C e'disjunction'significa A, B ou C.'unit'Indica que o valor deve ter uma unidade.styleIndica o estilo e os valores suportados são'long','short'e'narrow', o padrão é'long'; se for'short', significa A, B, C; se for'narrow', significa ABC.
Veja um exemplo:
veículos var = ['Motocicleta', 'Ônibus', 'Carro'];
var formatter = new Intl.ListFormat ('en', {style: 'long', type: 'conjunção'});
console.log (formatter.format (veículos));
// O resultado é: "Motocicleta, ônibus e carro"
Se o idioma de configuração for chinês, o resultado é que as palavras são separadas por vírgulas, por exemplo:
veículos var = ['Motocicleta', 'Ônibus', 'Carro'];
var formatter = new Intl.ListFormat ('zh', {estilo: 'longo', tipo: 'conjunção'});
console.log (formatter.format (veículos));
// O resultado é: "Motocicleta, ônibus e carro"
Este objeto está atualmente em estágio experimental e é compatível apenas com os navegadores Chrome72 +, então não irei mais longe.
Five, objeto Intl.NumberFormat
Intl.NumberFormat pode realizar diferentes processamentos de renderização de acordo com a seqüência mais numérica de diferentes ambientes de linguagem. Este objeto pode ser visto como Number.toLocaleString()uma versão atualizada do método, com os mesmos parâmetros e significados.
A sintaxe é a seguinte:
new Intl.NumberFormat ([locales [, options]])
localesOu seja, 'zh-Hans'ou 'en-US'os caracteres da tag de idioma BCP 47 , optionstambém parâmetros opcionais, mais parâmetros suportados porque Intl.NumberFormat é mais comumente usado, portanto, tenho uma breve introdução a esses parâmetros.
localMatcher
O algoritmo de correspondência de localidade a ser usado. O valor pode ser uma 'lookup'soma 'best fit', que 'best fit'é o valor padrão. Este algoritmo permite que a localidade fornecida pelo matcher seja o mais adequada possível para a solicitação, em vez de baseada no resultado do algoritmo de pesquisa. Por exemplo 'zh', a região chinesa simplificada ser considerado como chinês simplificado e a região do chinês tradicional será Pense nisso como chinês tradicional em vez de especificar uma correspondência①. 'lookup'O algoritmo é diferente e segue o algoritmo de pesquisa especificado no BCP 47. Normalmente desenvolvemos e não usamos este parâmetro.
① Seu próprio entendimento, se não estiver correto, bem-vindo para corrigir
estilo
Indica o estilo usado para conversão de formato. O valor padrão é 'decimal', o que significa que é um número, o valor também pode ser 'currency', o que significa que o formato de moeda é usado, ou pode ser 'percent'o formato de porcentagem.
moeda
O tipo de moeda usado ao usar o formato de moeda. O valor deve ser um código de moeda ISO 4217 (três letras). Os mais comuns são: China Yuan Renminbi (CNY), Dólar de Hong Kong (HKD), Novo Dólar de Taiwan (TWD), Euro (EUR), Dólar Americano (USD), Libra Esterlina (GBP), Iene Japonês (JPY).
Se o stylevalor do parâmetro for sim 'currency', o currencyatributo aqui deve ser fornecido.
currencyDisplay
Como exibir a moeda definida. O valor padrão é para 'symbol'exibir graficamente. Por exemplo, é para RMB '￥'. Outros valores opcionais estão disponíveis 'code', o que significa que o código de moeda ISO é usado 'CNY'. O valor é para RMB ; o valor também pode ser 'name'o nome do local moeda. Por exemplo, o dólar americano é 'dollar'para o RMB '人民币'.
useGrouping
Valor booleano. Indica se deve usar separadores de agrupamento, como separadores de milhares ou separadores de milhares / 100.000 / dez milhões. O valor padrão é true.
minimumIntegerDigits
O número mínimo de dígitos inteiros a serem usados. Os valores possíveis são de 1 a 21; o valor padrão é 1.
minimumFractionDigits
O número mínimo de casas decimais a serem usadas. Os valores possíveis são 0 a 20. O valor padrão para números comuns e formatos de porcentagem é 0, e o valor padrão para formato de moeda é o número de números de unidades menores fornecidos na lista de códigos de moeda ISO 4217 (se a lista não fornecer essas informações, use 2 em vez).
maximumFractionDigits
O número máximo de casas decimais a serem usadas. Os valores possíveis são 0-20. O valor padrão do formato de número comum é o maior de minimumFractionDigits e 3, e o valor padrão do formato de moeda é o maior dos números de unidade fornecidos nas listas de códigos de moeda minimumFractionDigits e ISO 4217 (se a lista não fornecer esta informação , é 2), O valor padrão da porcentagem de formato é o maior entre minimumFractionDigits e 0.
minimumSignificantDigits
O número menos significativo de dígitos a serem usados. Os valores possíveis são de 1 a 21; o valor padrão é 1.
maximumSignificantDigits
O número máximo de dígitos significativos a serem usados. Os valores possíveis são de 1 a 21; o valor padrão é 21.
No desenvolvimento real, usamos principalmente o format()方método herdado por NumberFormat para processar o formato de número.
Por exemplo:
1. Separe números consecutivos com separador de milhares
Para desenvolvimento web, especialmente móvel, recomenda-se que valores inteiros contínuos sejam separados por vírgulas. Consulte este artigo para saber os motivos .
Por padrão, quer usemos o Number.toLocaleString()método ou o new Intl.NumberFormat().format()método aqui , podemos ter apenas 3 casas decimais.
Por exemplo:
novo formato Intl.NumberFormat (). (12345.6789); // O resultado é: "12.345.679"
Se o número de casas decimais que queremos manter é 4, podemos lidar com isso da seguinte maneira:
new Intl.NumberFormat (undefined, {
minimumFractionDigits: 4
}). formato (12345.6789);
// O resultado é: "12.345.6789"
Se o valor do parâmetro de minimumFractionDigits exceder o número original de decimais, 0 será adicionado no final. O recurso de zeros também se aplica a inteiros.
2. Complemente 0 se o número não for suficiente
ES6 tem APIs prontas para conclusão de string, padStart () e padEnd () , mas o IE não oferece suporte.
Se precisar de preenchimento digital, você pode tentar o format()método aqui . O IE11 + é compatível.
Por exemplo, se quiser colocar zeros na frente de números menores que 10, você pode fazer isso:
new Intl.NumberFormat (undefined, {
minimumIntegerDigits: 2
}). formato (8);
// O resultado é: "08"
Se houver dígitos suficientes, mais de 3 dígitos, você pode definir como useGroupingpara falseque não encontre o constrangimento da separação por vírgula.
3. O valor vem em chinês
Forneça uma série de números, seguidos do "yuan" chinês. Pode ser definido da seguinte forma:
new Intl.NumberFormat ('zh-Hans', {
estilo: 'moeda',
moeda: 'CNY',
currencyDisplay: 'nome'
}). formato (12345.6789)
// O resultado é: "12.345,68 RMB"
4. Os números passam a ser exibidos em chinês
Por exemplo, se quisermos exibir o dia da semana, não há necessidade de fazer uma matriz para o mapeamento um a um. Tente o seguinte método:
'星期' + new Intl.NumberFormat ('zh-Hans-CN-u-nu-hanidec'). Format (new Date (). GetDay ());
// O resultado é: "sexta-feira"
Six, objeto Intl.PluralRules
O objeto Intl.PluralRules é um construtor para objetos que permitem vários formatos confidenciais e várias regras de linguagem.
A sintaxe é a seguinte:
new Intl.PluralRules ([locales [, options]])
Entre eles localesestá um parâmetro opcional, que é uma string de rótulo de idioma BCP 47. optionsTambém é um parâmetro opcional. Dois parâmetros são suportados. Um é o localeMatcheralgoritmo de pesquisa e o outro é o typetipo. O valor padrão é a 'cardinal'cardinalidade (referindo-se ao número de coisas), ou o valor 'ordinal', que significa o ordinal (referindo-se a a classificação ou classificação das coisas, por exemplo, "1st", "2nd", "3rd" em Inglês).
Existe um select()método mais comumente usado, teste:
new Intl.PluralRules ('zh-Hans'). select (0);
// O resultado é: "outro"
new Intl.PluralRules ('zh-Hans'). select (1);
// O resultado é: "outro"
new Intl.PluralRules ('zh-Hans'). select (2);
// O resultado é: "outro"
new Intl.PluralRules ('zh-Hans'). select (6);
// O resultado é: "outro"
new Intl.PluralRules ('zh-Hans'). select (18);
// O resultado é: "outro"
Pode-se ver que este objeto não é um martelo para usuários chineses.
Sete, objeto Intl.RelativeTimeFormat
Este objeto não é compatível com o IE, mas o Chrome71 + começou a suportá-lo. Representa a formatação do tempo relativo. Por exemplo, ontem e amanhã.
gramática
new Intl.RelativeTimeFormat ([locales [, options]])
Exemplo
Dê alguns exemplos para ver o desempenho em chinês (consulte o documento MDN para obter o desempenho no ambiente em inglês ).
var rtf = new Intl.RelativeTimeFormat ('zh');
// -1 significa o dia anterior
rtf.format (-1, 'dia');
// O resultado é: "1 dia atrás"
// 1 significa o próximo dia
rtf.format (1, 'dia');
// O resultado é: "1 dia depois"
Se definirmos outros parâmetros da seguinte maneira, o resultado retornado será mais interessante:
var rtf = new Intl.RelativeTimeFormat ('zh', {
numérico: 'auto'
});
rtf.format (-1, 'dia');
// O resultado é: "ontem"
rtf.format (1, 'dia');
// O resultado é: "Amanhã"
Oito, método Intl.getCanonicalLocales ()
O método Intl.getCanonicalLocales () pode retornar uma matriz contendo os nomes das localidades canônicas. As duplicatas serão ignoradas e os elementos serão verificados como tags de linguagem estruturalmente válidos.
Por exemplo:
Intl.getCanonicalLocales ('zh-hans');
// O resultado é: ["zh-Hans"]
Intl.getCanonicalLocales ('zh');
// O resultado é: ["zh"]
Intl.getCanonicalLocales ('zh-cmn-Hans-CN');
// O resultado é: ["cmn-Hans-CN"]
Intl.getCanonicalLocales ('zh-cn');
// O resultado é: ["zh-CN"]
Intl.getCanonicalLocales ('yue-hk');
// O resultado é: ["yue-HK"]
Intl.getCanonicalLocales ('zh-some');
// O resultado é: ["zh-Some"]
9. Conclusão do Festival do Meio Outono
O outono foi claro e ensolarado. O líder levou duas crianças ao parque de diversões. Eu estava escrevendo código e artigos técnicos em casa sozinha. Estava muito feliz.
Agora que estou envelhecendo, minha energia normal não consegue acompanhar os jovens. Felizmente, há feriados. Estou estudando quando você vai jogar.
Ontem à noite, postei um artigo na seção "Vida e Criação", "Estou tão emocionado, finalmente comi os bolos lunares da empresa este ano! " Para aqueles que não têm nada para fazer agora.
Este artigo também contém muito conteúdo e não sei muito sobre algumas coisas. Além da redação apressada, deve haver alguns erros. Sinta-se à vontade para me ajudar a me corrigir.
Agradeço a leitura e o apoio nos dias de semana, desejo a todos um feliz Festival do Meio Outono, se divirtam e comam bem!