Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
javascript internationalization API
Search
Taketoshi Aono(青野健利 a.k.a brn)
August 27, 2019
Programming
0
810
javascript internationalization API
EcmascriptのInternationalization APIについて
Taketoshi Aono(青野健利 a.k.a brn)
August 27, 2019
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
2.9k
Parsing Javascript
brn
12
9k
JSON & Object Tips
brn
1
410
CA 1Day Youth Bootcamp for Frontend LT
brn
0
820
Modern TypeScript
brn
2
750
javascript - behind the scene
brn
3
690
tc39 proposals
brn
0
800
プロダクト開発とTypeScript
brn
8
2.8k
React-Springでリッチなアニメーション
brn
1
620
Other Decks in Programming
See All in Programming
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
Security_for_introducing_eBPF
kentatada
0
110
fs2-io を試してたらバグを見つけて直した話
chencmd
0
240
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
260
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Spatial Rendering for Apple Vision Pro
warrenm
0
110
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
260
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
testcontainers のススメ
sgash708
1
120
Haze - Real time background blurring
chrisbanes
1
510
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
9k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
For a Future-Friendly Web
brad_frost
175
9.4k
How to Ace a Technical Interview
jacobian
276
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Writing Fast Ruby
sferik
628
61k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Transcript
Javascript Internationalization API
Name !CSO 5BLFUPTIJ"POP੨݈ར Occupation 'SPOUFOE%FWFMPQFS1SPEVDU0XOFS Company $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS OSS $POUSJCVUPSPG7
About IUUQJOGPCODI
&DNB &DNB͕&DNBͱͯ͠*OUFSOBUJPOBMJ[BUJPO"1*ͷ༷ࡦఆΛߦ͍ͬͯΔ &DNBͰ͋Δ&DNBTDSJQU +BWBTDSJQU ͕&DNBΛแ͓ͯ͠Γ &DNBTDSJQUଆʹJOͷ࣮͕ఏڙ͞ΕΔ ͪͳΈʹ+40/&DNBͰఆٛ͞Ε͓ͯΓɺ&DNBʹแ͞Ε͍ͯΔ
*OUM *OUFSOBMJ[BUJPO"1**OUMͱ͍͏άϩʔόϧΦϒδΣΫτΛެ։͓ͯ͠Γ ͦͷΦϒδΣΫτܦ༝Ͱ֤छ"1*ʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ ࠓͦͷத͔Βදతͳͭͷ"1*Λհ
*OUM$PMMBUPS
*OUM$PMMBUPS *OUM$PMMBUPSओʹจࣈྻൺֱΛߦ͏ͨΊͷ"1* ֤MPDBMFΛؾʹ͠ͳ͕Β6OJDPEFʹجͮ͘ෳࡶͳจࣈൺֱΛߦͬͯ͘ΕΔ
console.log(new Intl.Collator().compare('a', ‘c')); // → a negative value console.log(new Intl.Collator().compare('c',
'a')); // → a positive value console.log(new Intl.Collator().compare('a', 'a')); // → 0
new Intl.Collator('gr',{sensitivity: ‘base'}) .compare(‘ς', 'σ') // → 0 // ΪϦγϟޠͷγάϚจͱจதͰจࣈίʔυ͕ҟͳΔ
// CollatorΛ͏ͱɺsensitivityͷࢦఆͰൺֱͷৄࡉ Λઃఆͯ͜͠ͷΑ͏ͳෳࡶͳൺֱ͕Ͱ͖Δ
*OUM/VNCFS'PSNBU
*OUM/VNCFS'PSNBU *OUM/VNCFS'PSNBUMPDBMFʹԠͨ͡ͷॲཧΛߦ͏"1* EFDJNBMͱDVSSFODZʢ͓ۚʣͷͭʹରԠ
var number = 123456.789; // υΠπͰΧϯϚΛখɺϐϦΦυΛઍ୯Ґͷ۠Γʹ༻͍Δ console.log(new Intl.NumberFormat('de-DE').format(number)); // →
123.456,789 // ΠϯυͰthousands/lakh/crore۠Γ͕༻͍Δ console.log(new Intl.NumberFormat('en-IN').format(number)); // → 1,23,456.789 // nu֦ுΩʔʹΑΓࣈͳͲͷ൪߸ํ͕ࣜ͑Δ console.log(new Intl.NumberFormat(‘zh-Hans-CN-u-nu-hanidec') .format(number)); // → Ұೋࡾ,࢛ޒ.ࣣീ
var number = 123456.789; // ௨՟ϑΥʔϚοτΛ༻͍Δ console.log(new Intl.NumberFormat(‘de-DE', { style:
'currency', currency: 'EUR' } ).format(number)); // → 123.456,79 € console.log(new Intl.NumberFormat(‘ja-JP', { style: 'currency', currency: 'JPY' } ).format(number)); // → ˇ123,457
*OUM1MVSBM3VMFT
*OUM/VNCFS'PSNBU ୯ޠͷෳܗͷॲཧΛߦ͏"1*
var pr = new Intl.PluralRules('en-US'); pr.select(0); // → ‘other’ ෳܗ
pr.select(1); // → ‘one' ୯ܗ pr.select(2); // → ‘other' ෳܗ
const type = pr.select(count); const wordIndices = {'other': 'dogs', 'one':
'dog'}; const verbIndices = {'other': 'are', 'one': 'is'}; console.log( `Your ${indices[type]} ${verbIndices[type]} cute.` ) // count === 1 Your dog is cute. // count === 0 || count > 1 Your dogs are cute.
const ordIndices = { 'one': 'st', 'two': 'nd', 'few': 'rd',
'other': 'th' } const pr = new Intl.PluralRules('en-US', {type: ‘ordinal'} ); const ord = pr.select(3); // → few console.log(`3${ordIndices[ord]}`); // → 3rd
*OUM%BUFUJNF'PSNBU
*OUM%BUFUJNF'PSNBU MPDBMFʹԠͨ͡ͱ࣌ࠁͷॲཧΛߦ͏"1*
new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', hour:
'numeric', minute: 'numeric', second: 'numeric', hour12: false} ).format(new Date()) // → 20198݄27 16:47:50
new Intl.DateTimeFormat('ja-JP', { month: 'long', day: 'numeric', hour: 'numeric', hour12:
false} ).format(new Date()) // → 8݄27 16࣌
*OUM%BUFUJNF'PSNBU GPSNBU5P1BSUTͱ͍͏ϝιουΛ͏͜ͱͰಠࣗͷϑΥʔϚοτ࣮ݱͰ͖ Δ
new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', hour:
'numeric', minute: 'numeric', second: 'numeric', hour12: false} ).formatToParts(new Date())
[ { "type": "year", "value": "2019" }, { "type": "literal",
"value": "" }, { "type": "month", "value": "8" }, { "type": "literal", "value": "݄" }, { "type": "day", "value": "27" }, { "type": "literal", "value": " " }, { "type": "hour", "value": "16" }, { "type": "literal", "value": ":" }, { "type": "minute", "value": "57" }, { "type": "literal", "value": ":" }, { "type": "second", "value": "38" } ]
·ͱΊ *&͔Β͑ΔͷͰੋඇ͓ࢼ͠Λ