turuncukafalikiz
New member
Intl – Tarayıcıda Uluslararasılaştırma API’sı
Uluslararasılaştırma, web geliştirmede ne yazık ki hala çok az ilgi gören bir konudur. Çoğunlukla, uluslararasılaştırma terimi metinlerin çevirisi ile sona ermektedir. Ancak bu, tarayıcının hala yerleşik kitaplıklara bıraktığı bir sorundur. Ancak, artık tüm modern tarayıcıların Intl API sayesinde tutarlı bir şekilde puan alabildiği noktalar, sayıların, tarih ve saat değerlerinin yerelleştirilmiş biçimlendirmesi gibi sorunlardır. Bu bilgilere ek olarak, Intl API ayrıca yerel dize karşılaştırmaları için işlevsellik ve tekil ve çoğulları işlemek için kurallar sağlar.
Tüm JavaScript ortamları – en popüler tarayıcılar, Node.js ve hatta Internet Explorer – küresel Intl nesnesi biçimindeki Intl API’yi destekler. ek olarak içerir getCanonicalLocalesyöntemi aşağıdaki yapıcılar:
- Collator: Dile bağlı dize karşılaştırma sınıfı
- DateTimeFormat: Tarih ve saat değerlerinin biçimlendirilmesi
- NumberFormat: Para birimleri veya yüzdeler gibi sayıların biçimlendirilmesi
- PluralRules: Tekil ve çoğul ile başa çıkmada destek
the getCanonicalLocalesYöntem, bir girdi için geçerli bir değer döndürür. Localedeğer, Intl alt sınıflarının yapıcıları gibi hareket eder.Yöntem “DE” değerini “de” ye dönüştürür, “de”, “de-de” ve “DE-DE” değerlerine sahip bir dizi “de” olur ve “de -DE” ve “de -ENG” girişi aa’ya yol açar RangeError. Bir dizi için, getCanonicalLocales-Yöntem tüm kopyalar.
Tüm intl sınıflarının adlandırılmış bir statik yöntemi vardır. supportedLocalesOf. Bu yöntem birini kabul eder Locale-String veya bir dizi Locales ve bir dizi döndürür Locales varsayılan yerel ayara başvurmadan bu sınıfı doğrudan destekler.
Harmanlayıcı: Dize karşılaştırmaları
JavaScript’in sahip olduğu Array.prototype.sort-Dizileri sıralama yöntemi. Bu yöntem, her öğeyi UTF-16 kod değerine göre sıralar. Alternatif olarak kabul et Sortyöntem bir karşılaştırma işlevi. Her aramada, bu karşılaştırma işlevi birbiriyle karşılaştırılan iki değer alır. İlk değer ikinciden küçükse, karşılaştırma işlevi sıfırdan küçük bir sayı döndürür; ilk değer daha büyükse, sıfırdan büyük bir sayı döndürülür. Her iki değer de eşitse, karşılaştırma fonksiyonunun dönüş değeridir. Null. Uygulamanın çalıştığı bölgeye bağlı olarak bu sıralamanın davranışı değişebilir. the CollatorIntl API sınıfı, geliştiricileri bu görevden kurtarır ve sıralamanın seçilen bölge için uygun olmasını sağlar.
the compareBir harmanlayıcı örneğinin yönteminde bir to vardır sortJavaScript Dizileri yöntemi, bu nedenle iki değer alır ve 1, 0 veya -1 döndürür. Aşağıdaki örnek, diziyi “de-DE” yerel ayarı için “armut”, “elma” ve “limon” değerlerine göre sıralar.
const col = new Intl.Collator('de');
const arr = [ 'Birnen', 'Äpfel', 'Zitronen' ];
console.log(arr.sort(col.compare)); // ["Äpfel", "Birnen", "Zitronen"]
Tahmin edebileceğiniz gibi sonuç “elma, armut, limon”. Yerel “sv-SE” için, yani İsveç’te İsveççe, burada “Z”den sonra “Ä” sıralandığı için sonuç tamamen farklı görünüyor. Ve bu sadece bir örnek Collatorsınıf faydalıdır. Başka bir tipik uygulama, sayısal değerleri sıralamaktır. Varsayılan olarak, JavaScript şu şekilde sıralanır: 1, 132, 22. Bu nedenle, burada sayısal değer değil, ilk basamak belirleyicidir. the Collatorclass, sayısal değerlerin doğru yorumlanabileceği bir çözüm sunar. Ancak, bu davranış devre dışıdır ve öncelikle harmanlayıcı örneği oluşturulurken etkinleştirilmelidir. Bu, yerel karakter dizisinin Unicode uzantısı “kn” aracılığıyla, örneğin bu durumda “de-u-kn” veya numeric-Değeri aktif olan seçenek true ayarlandı. Tüm intl kurucuları, bu tür seçenekleri bir nesne biçiminde, somutlaştırmanın ikinci argümanı olarak kabul eder.
const col = new Intl.Collator('de', {numeric: true});
const arr = [132, 1, 22 ];
console.log(arr.sort(col.compare)); // [1, 22, 132]
Bu seçeneklere ek olarak ciltleyici, büyük/küçük harf duyarlılığı gibi diğer seçenekleri de destekler. Tamamen esnek olan bu sınıf, bir dize karşılaştırması için kullanıcı tanımlı işlevler yazmanıza gerek kalmamasını sağlar.
DateTimeFormat – tarih ve saat biçimlendirme
JavaScript’in büyük zayıflıklarından biri Datesınıf, onunla yaratılan nesnelerin neredeyse hiç biçimlendirilememesidir. Bir uygulama bunun için her zaman ek bir kitaplık gerektirir. Intl API bu sorunları en azından kısmen çözer. the toString-Metodu Date-object şu değeri döndürür: “Cuma 05 Haziran 2020 10:15:00 GMT+0200 (Orta Avrupa Yaz Saati)”. Bununla birlikte, bir web uygulamasında, böyle bir karakter dizisi çok az anlam ifade eder. Normalde sadece tarih veya saat doğru formatta gösterilmelidir, yani yaklaşık 06/05/2020, 06/05/2020 veya 05/06/2020 tarihi için. the Dateclass bu biçimlendirmeyi doğrudan desteklemez, yalnızca aşağıdaki gibi bireysel yöntemlerle destekler getDay veya getMonth, ancak, 5 Haziran için yalnızca tek haneli sürümler sağlar. Geliştiriciler burada tekrar aktif olmalıdır. the DateTimeFormatIntl API sınıfı, formatyöntem daha zarif bir çözüm:
const dateTime = new Intl.DateTimeFormat('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
});
console.log(dateTime.format(date)); // 05.06.2020
Yerel ayarın “en-US” olarak değiştirilmesi “06/05/2020” sonucunu verir ve “en-GB”, “05/06/2020” sonucunu verir. O Options-Nesnesi DateTimeFormat-sınıf, görünümün ve ayrıca tek tek öğelerin içeriğine karar verir. Date-nesne. orada olacak dayözelliği atlanır, örneğin çıktıda gün özelliği de atlanır. özelliklerinin çoğu Options-Nesneler, iki basamakla doldurulan “2 basamak” ve değere bağlı olarak bir basamak, iki basamak veya dört basamaklı çıktı üreten “nümerik” değerlerini destekler. Zaman değerlerini biçimlendirirken, DateTimeFormat-Tarih olarak sınıflandırın:
const dateTime = new Intl.DateTimeFormat('de-DE', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
console.log(dateTime.format(date)); //10:15:00
Tarih ve saat biçimlendirmesi yardımcı olur DateTimeFormatsınıf, ancak seçenekler sınırlıdır. Tamamen ücretsiz biçimlendirme yoktur. Ama var formatToPartsSonucun her bir parçasını ayrı bir dizi öğesi olarak içeren yöntem:
const dateTime = new Intl.DateTimeFormat('de-DE', {
hour: '2-digit',
minute: '2-digit',
});
console.log(dateTime.formatToParts(date));
/* Ausgabe:
[{type: "hour", value: "10"},
{type: "literal", value: ":"},
{type: "minute", value: "15"}]*/
Ortaya çıkan nesnenin ayrı parçalarından herhangi bir format yapılabilir. Bununla birlikte, burada kapsamlı bir manuel çalışma gereklidir, ancak yerelden çok daha kolaydır. Date– JavaScript nesnesi.
NumberFormat: Sayıları biçimlendir
the NumberFormatclass, adından da anlaşılacağı üzere sayısal değerleri üç farklı şekilde biçimlendirme işini halleder. the styleÖzellik, bunun sıradan bir sayı (ondalık), para birimi değeri (para birimi) veya yüzde değeri (yüzde) olup olmadığını belirler. Stil seçeneği için varsayılan değer “ondalık”tır. useGrouping “true” değerine sahiptir, böylece her zaman binlik ayırıcı kullanılır ve örnekte kullanılan seçenek de atlanabilir. Aşağıdaki kod, 3141.59 sayısını binlik ayırıcı ve iki ondalık basamakla birlikte verir:
const number = Math.PI * 1000;
const numberFormatter = new Intl.NumberFormat('de-DE', {
useGrouping: true,
maximumFractionDigits: 2,
});
const formattedNumber = numberFormatter.format(number);
console.log(formattedNumber); // 3.141,59
seçeneği ile useGrouping binlik ayırıcıyı gösterip göstermemeyi seçebilirsiniz. Yapıcıdaki yerel ayarı “en-US” değerine değiştirmek, 3141.59 çıktısıyla sonuçlanır.
Bir diğer önemli özelliği de NumberFormatsınıf, para birimi değerlerinin biçimlendirilmesidir. Bu özellik tarafından desteklenmektedir style“para birimi” değeriyle etkinleştirilen özellik. Buna ek olarak, para biriminin sahip olması gerekir currencymülkiyet geçer. Bu yapılmazsa, tarayıcı bir dosya oluşturur. TypeError son. Değer seçimi için “EUR” veya “USD” gibi ISO 4217 para birimi kodları mevcuttur. Aşağıdaki kod, 3.141,59 € değerini döndürür:
const number = Math.PI * 1000;
const numberFormatter = new Intl.NumberFormat('en-GB', {
style: "currency",
currency: "EUR",
maximumFractionDigits: 2,
});
const formattedNumber = numberFormatter.format(number);
console.log(formattedNumber); // €3.141,59
the currencyDisplayÖzellik, para birimi simgesinin görüntülenmesini kontrol eder. Varsayılan “sembol”, bu örnekte euro sembolünü gösterir. Diğer olası değerler, ISO kodu için “kod” ve para biriminin uzun adı için “ad” dır.
PluralRules: tekil mi çoğul mu, soru bu
bir örneği PluralRulessınıf orada selectBir sayı yöntemi, tekil mi yoksa çoğul mu olduğunu gösteren bir dize döndürür. Kuşkusuz, bu sınıf Alman yerel ayarı için oldukça sıra dışı. İçinde typevarsayılan değeri “kardinal” olan seçenek, yöntem 1 sayısı için “bir” ve diğerleri için “diğer” değerini döndürür. Bu tür miktar anlamına gelir. Almanca yerelleştirme için sürekli olarak “else” değerleri döndüren “sıralı” türü sayabilirsiniz. Aşağıdaki kod örneğinde gösterildiği gibi, “en-US” yerel ayarı için durum farklıdır:
const arr = new Array(24).fill('').map((v, i) => i);
const pr = new Intl.PluralRules('en-US', {type: 'ordinal'});
arr.forEach(v => console.log(v, pr.select(v)));
1 ile biten tüm değerler için, select-Yöntem “bir”, 2 için “iki” değeri, 3 için “birkaç” değeri ve diğer tüm girişler için döndürür select “diğer” çıktısını döndürür. “kardinal” tipine geçiş, 1 için tekrar “bir” ve diğer değerler için “diğer” döndürür.
Sonuç: Intl API Bize Gerçekten Yardımcı Olur mu?
Intl API, uluslararası uygulamaları etkinleştirmek için JavaScript dil standardına bazı yararlı uzantılar sağlar. Ancak arayüz, çeviri konusunu tamamen atlar ve diğer kütüphanelere bırakır. Ancak tarih, saat ve sayısal değerleri biçimlendirmek, bir dizi standart sorunu zarif ve sağlam bir şekilde çözer.
()
ana sayfaya