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
860
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
3k
Parsing Javascript
brn
14
9.1k
JSON & Object Tips
brn
1
460
CA 1Day Youth Bootcamp for Frontend LT
brn
0
910
Modern TypeScript
brn
2
790
javascript - behind the scene
brn
3
720
tc39 proposals
brn
0
850
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
670
Other Decks in Programming
See All in Programming
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
趣味全開のAITuber開発
kokushin
0
200
AIコーディングの理想と現実
tomohisa
22
29k
Chrome Extension Techniques from Hell
moznion
1
160
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
210
AHC045_解説
shun_pi
0
530
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
650
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
130
List とは何か? / PHPerKaigi 2025
meihei3
0
870
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
180
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
280
Do Dumb Things
mitsuhiko
0
440
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Making Projects Easy
brettharned
116
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Statistics for Hackers
jakevdp
798
220k
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" } ]
·ͱΊ *&͔Β͑ΔͷͰੋඇ͓ࢼ͠Λ