$30 off During Our Annual Pro Sale. View Details »

javascript internationalization API

javascript internationalization API

EcmascriptのInternationalization APIについて

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. Javascript Internationalization API

    View Slide

  2. Name
    !CSO 5BLFUPTIJ"POP੨໺݈ར

    Occupation
    'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
    Company
    $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
    OSS
    $POUSJCVUPSPG7
    About
    IUUQJOGPCODI

    View Slide

  3. &DNB
    &DNB͕&DNBͱͯ͠*OUFSOBUJPOBMJ[BUJPO"1*ͷ࢓༷ࡦఆΛߦ͍ͬͯΔ
    &DNBͰ͋Δ&DNBTDSJQU +BWBTDSJQU
    ͕&DNBΛ಺แ͓ͯ͠Γ
    &DNBTDSJQUଆʹJOͷ࣮૷͕ఏڙ͞ΕΔ
    ͪͳΈʹ+40/΋&DNBͰఆٛ͞Ε͓ͯΓɺ&DNBʹ಺แ͞Ε͍ͯΔ

    View Slide

  4. *OUM
    *OUFSOBMJ[BUJPO"1*͸*OUMͱ͍͏άϩʔόϧΦϒδΣΫτΛެ։͓ͯ͠Γ
    ͦͷΦϒδΣΫτܦ༝Ͱ֤छ"1*ʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ
    ࠓ೔͸ͦͷத͔Β୅දతͳͭͷ"1*Λ঺հ

    View Slide

  5. *OUM$PMMBUPS

    View Slide

  6. *OUM$PMMBUPS
    *OUM$PMMBUPS͸ओʹจࣈྻൺֱΛߦ͏ͨΊͷ"1*
    ֤MPDBMFΛؾʹ͠ͳ͕Β6OJDPEFʹجͮ͘ෳࡶͳจࣈൺֱΛߦͬͯ͘ΕΔ

    View Slide

  7. 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

    View Slide

  8. new Intl.Collator('gr',{sensitivity: ‘base'})
    .compare(‘ς', 'σ')
    // → 0
    // ΪϦγϟޠͷγάϚ͸จ຤ͱจதͰจࣈίʔυ͕ҟͳΔ
    // CollatorΛ࢖͏ͱɺsensitivityͷࢦఆͰൺֱͷৄࡉ
    ౓Λઃఆͯ͜͠ͷΑ͏ͳෳࡶͳൺֱ͕Ͱ͖Δ

    View Slide

  9. *OUM/VNCFS'PSNBU

    View Slide

  10. *OUM/VNCFS'PSNBU
    *OUM/VNCFS'PSNBU͸MPDBMFʹԠͨ͡਺஋ͷॲཧΛߦ͏"1*
    EFDJNBMͱDVSSFODZʢ͓ۚʣͷͭʹରԠ

    View Slide

  11. 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));
    // → Ұೋࡾ,࢛ޒ࿡.ࣣീ۝

    View Slide

  12. 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

    View Slide

  13. *OUM1MVSBM3VMFT

    View Slide

  14. *OUM/VNCFS'PSNBU
    ୯ޠͷෳ਺ܗ౳ͷॲཧΛߦ͏"1*

    View Slide

  15. var pr = new Intl.PluralRules('en-US');
    pr.select(0);
    // → ‘other’ ෳ਺ܗ
    pr.select(1);
    // → ‘one' ୯਺ܗ
    pr.select(2);
    // → ‘other' ෳ਺ܗ

    View Slide

  16. 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.

    View Slide

  17. 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

    View Slide

  18. *OUM%BUFUJNF'PSNBU

    View Slide

  19. *OUM%BUFUJNF'PSNBU
    MPDBMFʹԠͨ͡೔෇ͱ࣌ࠁͷॲཧΛߦ͏"1*

    View Slide

  20. new Intl.DateTimeFormat('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false}
    ).format(new Date())
    // → 2019೥8݄27೔ 16:47:50

    View Slide

  21. new Intl.DateTimeFormat('ja-JP', {
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    hour12: false}
    ).format(new Date())
    // → 8݄27೔ 16࣌

    View Slide

  22. *OUM%BUFUJNF'PSNBU
    GPSNBU5P1BSUTͱ͍͏ϝιουΛ࢖͏͜ͱͰಠࣗͷϑΥʔϚοτ΋࣮ݱͰ͖
    Δ

    View Slide

  23. new Intl.DateTimeFormat('ja-JP', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false}
    ).formatToParts(new Date())

    View Slide

  24. [
    {
    "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"
    }
    ]

    View Slide

  25. ·ͱΊ
    *&͔Β࢖͑ΔͷͰੋඇ͓ࢼ͠Λ

    View Slide