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
890
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.3k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
効率的な開発手段として VRTを活用する
ishkawa
0
160
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
NPOでのDevinの活用
codeforeveryone
0
900
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
PipeCDのプラグイン化で目指すところ
warashi
1
300
Deep Dive into ~/.claude/projects
hiragram
14
14k
Model Pollution
hschwentner
1
160
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Navigating Team Friction
lara
187
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Building Applications with DynamoDB
mza
95
6.5k
Scaling GitHub
holman
460
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Language of Interfaces
destraynor
158
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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" } ]
·ͱΊ *&͔Β͑ΔͷͰੋඇ͓ࢼ͠Λ