Sử dụng i18n trong javascript dùng gem i18n-js

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/translations

Bạ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 object

Bạ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 28th

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