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
React.js & i18n
Search
Eric Ferraiuolo
January 28, 2015
Programming
2
470
React.js & i18n
http://formatjs.io/
Eric Ferraiuolo
January 28, 2015
Tweet
Share
More Decks by Eric Ferraiuolo
See All by Eric Ferraiuolo
Node on the Road
ericf
1
100
Pure
ericf
7
960
YUI and The Future
ericf
2
730
YUI 3.10.0 — Go Fast
ericf
3
570
YUI, Open Source, and Community
ericf
0
440
Advocatus Diaboli – Throne of JS
ericf
8
16k
Y.App: Coordinating URL Navigation, Routing, and Managing Views
ericf
10
2.1k
Other Decks in Programming
See All in Programming
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
580
XP, Testing and ninja testing ZOZ5
m_seki
2
260
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
470
CSC509 Lecture 01
javiergs
PRO
1
430
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
480
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
320
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
A designer walks into a library…
pauljervisheath
209
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Six Lessons from altMBA
skipperchong
28
4k
Producing Creativity
orderedlist
PRO
347
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Music & Morning Musume
bryan
46
6.8k
Building Adaptive Systems
keathley
43
2.8k
Transcript
React.js & i18n @ericf - Yahoo ReactConf
1.002 2/1/2015
But I only care about English in the USA!
English 5.2% 27% Native Speakers Internet Users Source: Wikipedia
None
None
None
Formatting
None
None
function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g,
","); return parts.join("."); } “How to print a number with commas as thousands separators in JavaScript?” 25 Answers
Intl.NumberFormat Intl.DateTimeFormat Intl.Collator
new Intl.NumberFormat().format(1000); new Intl.DateTimeFormat({ month: 'long', day : 'numeric', year
: 'numeric' }).format(Date.now()); 1,000 January 28, 2015 Intl Built-ins
<FormattedNumber value={1000} /> <FormattedDate value={Date.now()} month="long" day="numeric" year="numeric" /> React
Intl 1,000 January 28, 2015
<p className=“post-meta”> Posted <FormattedRelative value={this.props.date} /> </p> Relative Times Posted
3 hours ago
“Hello, {name}!” “You’re {age, number} years old.” String Messages
var msg = `{numComments, plural, one {# comment}
other {# comments} }`; <FormattedMessage message={msg} numComments={1} /> Pluralization 1 comment
var msg = `{numComments, plural, one {# comment}
other {# comments} }`; <FormattedMessage message={msg} numComments={1200} /> Pluralization 1,200 comments
var App = React.createClass({ mixins: [IntlMixin], render: function () {
return <FormattedNumber value={this.props.price} style="currency" currency="USD" /> } }); React.render( <App locales="fr-FR" price={1099.95} />, document.getElementById("container") ); Intl Mixin 1 099,95 $US
7.7k 150+ React Intl min + gz languages English as
default
None
CLDR ICU JS Runtimes (Intl.*) Format.js Core Format.js Integrations
Intl.MessageFormat Intl.RelativeFormat Future Intl Built-ins?
Questions? formatjs.io @ericf - Yahoo ReactConf