Slide 1
Slide 1 text
Javascript Internationalization API
Slide 2
Slide 2 text
Name
!CSO 5BLFUPTIJ"POP੨݈ར
Occupation
'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
Company
$ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
OSS
$POUSJCVUPSPG7
About
IUUQJOGPCODI
Slide 3
Slide 3 text
&DNB
&DNB͕&DNBͱͯ͠*OUFSOBUJPOBMJ[BUJPO"1*ͷ༷ࡦఆΛߦ͍ͬͯΔ
&DNBͰ͋Δ&DNBTDSJQU +BWBTDSJQU
͕&DNBΛแ͓ͯ͠Γ
&DNBTDSJQUଆʹJOͷ࣮͕ఏڙ͞ΕΔ
ͪͳΈʹ+40/&DNBͰఆٛ͞Ε͓ͯΓɺ&DNBʹแ͞Ε͍ͯΔ
Slide 4
Slide 4 text
*OUM
*OUFSOBMJ[BUJPO"1**OUMͱ͍͏άϩʔόϧΦϒδΣΫτΛެ։͓ͯ͠Γ
ͦͷΦϒδΣΫτܦ༝Ͱ֤छ"1*ʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ
ࠓͦͷத͔Βදతͳͭͷ"1*Λհ
Slide 5
Slide 5 text
*OUM$PMMBUPS
Slide 6
Slide 6 text
*OUM$PMMBUPS
*OUM$PMMBUPSओʹจࣈྻൺֱΛߦ͏ͨΊͷ"1*
֤MPDBMFΛؾʹ͠ͳ͕Β6OJDPEFʹجͮ͘ෳࡶͳจࣈൺֱΛߦͬͯ͘ΕΔ
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
new Intl.Collator('gr',{sensitivity: ‘base'})
.compare(‘ς', 'σ')
// → 0
// ΪϦγϟޠͷγάϚจͱจதͰจࣈίʔυ͕ҟͳΔ
// CollatorΛ͏ͱɺsensitivityͷࢦఆͰൺֱͷৄࡉ
Λઃఆͯ͜͠ͷΑ͏ͳෳࡶͳൺֱ͕Ͱ͖Δ
Slide 9
Slide 9 text
*OUM/VNCFS'PSNBU
Slide 10
Slide 10 text
*OUM/VNCFS'PSNBU
*OUM/VNCFS'PSNBUMPDBMFʹԠͨ͡ͷॲཧΛߦ͏"1*
EFDJNBMͱDVSSFODZʢ͓ۚʣͷͭʹରԠ
Slide 11
Slide 11 text
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));
// → Ұೋࡾ,࢛ޒ.ࣣീ
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
*OUM1MVSBM3VMFT
Slide 14
Slide 14 text
*OUM/VNCFS'PSNBU
୯ޠͷෳܗͷॲཧΛߦ͏"1*
Slide 15
Slide 15 text
var pr = new Intl.PluralRules('en-US');
pr.select(0);
// → ‘other’ ෳܗ
pr.select(1);
// → ‘one' ୯ܗ
pr.select(2);
// → ‘other' ෳܗ
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
*OUM%BUFUJNF'PSNBU
Slide 19
Slide 19 text
*OUM%BUFUJNF'PSNBU
MPDBMFʹԠͨ͡ͱ࣌ࠁͷॲཧΛߦ͏"1*
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
new Intl.DateTimeFormat('ja-JP', {
month: 'long',
day: 'numeric',
hour: 'numeric',
hour12: false}
).format(new Date())
// → 8݄27 16࣌
Slide 22
Slide 22 text
*OUM%BUFUJNF'PSNBU
GPSNBU5P1BSUTͱ͍͏ϝιουΛ͏͜ͱͰಠࣗͷϑΥʔϚοτ࣮ݱͰ͖
Δ
Slide 23
Slide 23 text
new Intl.DateTimeFormat('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: false}
).formatToParts(new Date())
Slide 24
Slide 24 text
[
{
"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"
}
]
Slide 25
Slide 25 text
·ͱΊ
*&͔Β͑ΔͷͰੋඇ͓ࢼ͠Λ