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
460
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
97
Pure
ericf
7
940
YUI and The Future
ericf
2
720
YUI 3.10.0 — Go Fast
ericf
3
550
YUI, Open Source, and Community
ericf
0
420
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
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
780
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
280
Doma で目指す ORM 最適解
nakamura_to
1
160
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
220
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
380
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
型安全なDrag and Dropの設計を考える
yudppp
5
660
バリデーションライブラリ徹底比較
nayuta999999
1
440
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
複数アプリケーションを育てていくための共通化戦略
irof
2
720
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
「兵法」から見る質とスピード
ickx
0
200
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Writing Fast Ruby
sferik
628
61k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Visualization
eitanlees
146
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing for Performance
lara
608
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Adopting Sorbet at Scale
ufuk
76
9.4k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
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