Sử Dụng I18n Trong Javascript Dùng Gem I18n-js - Viblo
Ngày nay việc phát triển các sản phẩm nói chung và xây dựng các website đa ngôn ngữ đang ngày càng phổ biến, trở thành nhu cầu tất yếu cho một sản phẩm hoàn hảo trên quy mô toàn cầu.
Một công cụ rất hữu ích giúp chúng ta thực hiện việc biểu diễn đa ngôn ngữ trên website là I18n. Việc sử dụng I18n trong Ruby on Rails có lẽ không còn xa lạ với nhiều bạn. Tuy nhiên việc dùng I18n trong các file viết mã javascript lại khiến nhiều người bỡ ngỡ. Trong bài viết này tôi sẽ tập trung chia sẻ một cách hữu hiệu giúp bạn có thể sử dụng I18n trong các file mã nguồn javascript (.js)
1. Cài đặt
Bạn thêm gem sau vào Gemfile:
gem "i18n-js"Sau đó chạy lệnh:
$ bundle install
Hoặc bạn cũng có thể cài đặt gem trên trực tiếp thông qua lệnh:
$ gem install i18n-js
Trong file app/assets/javascripts/application.js, bạn thêm các dòng sau:
//= require i18n //= require i18n.js //= require i18n/translationsBạn thêm dòng config.middleware.use I18n::JS::Middleware vào file config/environments/development.rb. Sau đó vào terminal chạy lệnh rake i18n:js:export. Các file translation sẽ được sinh ra. Bạn có thể tùy chỉnh scope sinh file tại file config/i18n-js.yml (Bạn có thể chạy lệnh rails generate i18n:js:config để sinh file này).
2. Export Configuration (For translations)
Bạn có thể cài đặt cấu hình các ngôn ngữ cần sử dụng trong website theo ví dụ sau:
Nếu bạn chỉ chọn một ngôn ngữ nhất định, bạn có thể làm như sau:
translations: - file: 'public/javascripts/en.js' only: 'en.*' - file: 'public/javascripts/pt-BR.js' only: 'pt-BR.*'Nếu bạn muốn export tất cả các ngôn ngữ, bạn chỉ cần thay đổi dòng only thành "*".
- file: 'app/assets/javascripts/i18n/translations.js' only: "*"Tới đây đã xong, giờ bạn có thể thoải mái sử dụng I18n trong js như đã làm với Ruby thông thường. Ví dụ trong phần locales bạn viết:
en: evaluators: alert: should_save: "You should save before fix!"Trong file .js bạn viết:
$("#btn-fix").click(function() { if (isChange) { alert(I18n.t("evaluators.alert.should_save")); return false; } });Sau khi hoàn thành trên, khi bạn thao tác trên trình duyệt sẽ hiển thị thông báo có nội dung "You should save before fix!"
Mở rộng
Bên cạnh tác dụng trên, I18n cũng có thể sử dụng để định dạng số, ngày tháng, ...
Định dạng số
Cũng giống như Rails helpers, bạn cũng có thể định dạng số và các loại tiền tệ theo quy tắc sau:
I18n.l("currency", 1990.99); // $1,990.99 I18n.l("number", 1990.99); // 1,990.99 I18n.l("percentage", 123.45); // 123.450%Để có thể tùy chỉnh nhiều hơn với các định dạng số, bạn có thể sử dụng các hàm sau: I18n.toNumber, I18n.toPercentage, I18n.toCurrency và I18n.toHumanSize
I18n.toNumber(1000); // 1,000.000 I18n.toCurrency(1000); // $1,000.00 I18n.toPercentage(100); // 100.000%Hàm toNumber và toPercentage cho phép bạn sử dụng các lựa chọn sau:
- precision: defaults to 3
- separator: defaults to .
- delimiter: defaults to ,
- strip_insignificant_zeros: defaults to false
Bạn có thể sử dụng chúng theo ví dụ sau:
I18n.toNumber(1000, {precision: 0}); // 1,000 I18n.toNumber(1000, {delimiter: ".", separator: ","}); // 1.000,000 I18n.toNumber(1000, {delimiter: ".", precision: 0}); // 1.000Định dạng ngày tháng
Bạn hãy xem trước ví dụ:
// accepted formats I18n.l("date.formats.short", "2015-09-28"); // yyyy-mm-dd I18n.l("time.formats.short", "2015-09-28 23:12:43"); // yyyy-mm-dd hh:mm:ss I18n.l("time.formats.short", "2015-09-28T18:10:34"); // JSON format with local Timezone (part of ISO-8601) I18n.l("time.formats.short", "2015-09-28T18:10:34Z"); // JSON format in UTC (part of ISO-8601) I18n.l("date.formats.short", 1251862029000); // Epoch time I18n.l("date.formats.short", "09/28/2015"); // mm/dd/yyyy I18n.l("date.formats.short", (new Date())); // Date objectBạn có thể thêm placeholders vào định dạng ngày theo mẫu:
I18n.translations["en"] = { date: { formats: { ordinal_day: "%B %{day}" } } } I18n.l("date.formats.ordinal_day", "2015-09-28", { day: '28th' }); // Sep 28thBạn có thể sử dụng hàm I18n.strftime để định dạng ngày:
var date = new Date(); I18n.strftime(date, "%d/%m/%Y");Các quy ước định dạng được tuân thủ theo quy tắc sau:
%a - The abbreviated weekday name (Sun) %A - The full weekday name (Sunday) %b - The abbreviated month name (Jan) %B - The full month name (January) %d - Day of the month (01..31) %-d - Day of the month (1..31) %H - Hour of the day, 24-hour clock (00..23) %-H - Hour of the day, 24-hour clock (0..23) %I - Hour of the day, 12-hour clock (01..12) %-I - Hour of the day, 12-hour clock (1..12) %m - Month of the year (01..12) %-m - Month of the year (1..12) %M - Minute of the hour (00..59) %-M - Minute of the hour (0..59) %p - Meridian indicator (AM or PM) %S - Second of the minute (00..60) %-S - Second of the minute (0..60) %w - Day of the week (Sunday is 0, 0..6) %y - Year without a century (00..99) %-y - Year without a century (0..99) %Y - Year with century %z - Timezone offset (+0545)Kết luận
Với việc sử dụng I18n trong các file javascript sẽ giúp code của bạn rõ ràng hơn, không bị trùng lặp nội dung và cũng dễ dàng khi cần thay đổi nội dung. Hy vọng bài viết trên sẽ giúp ích nhiều cho bạn trong phát triển các sản phẩm web.
Cám ơn các bạn đã đọc bài viết của mình và mong rằng chúng ta sẽ có những trao đổi hữu ích thông qua bài viết này.
Từ khóa » Cách Dùng I18n
-
Xây Dựng đa Ngôn Ngữ đơn Giản Với I18n Chỉ Bằng Pure ... - Viblo
-
Xây Dựng đa Ngôn Ngữ đơn Giản Với I18n Chỉ Bằng Pure Javascript
-
[Laravel] Hướng Dẫn Làm đa Ngôn Ngữ (i18n) Cho Website Trong ...
-
Áp Dụng I18n Trong Rails 5 - Reviews Tai Nghe Tốt Nhất
-
I18n Trong Rails (Part II)
-
Hỏi Cách Lấy Language Hiện Tại Bằng I18n - Dạy Nhau Học
-
Bài 21: Sử Dụng đa Ngôn Ngữ I18n Trong Spring - YouTube
-
Các Thư Viện Tốt Nhất Cho React I18n Vào Năm 2021 - Chickgolden
-
Sử Dụng đa Ngôn Ngữ Trong Spring | Lê Vũ Nguyên Dạy Học Lập Trình
-
Quốc Tế Hóa (i18n) Với Angular - HelpEx
-
Ngày 19: Internationalization Và Localization - Symfony
-
I18n | Laravue
-
I18n Là Gì
-
Thực Hiện đa Ngôn Ngữ Hiệu Quả Dụng Vue-i18n