הגע לקהל רחב יותר על ידי התאמת התוכן שלך לכל שפה או מקום עם ה-API Intl.

ה- API Intl מפשט את העיצוב והמניפולציה של טקסט, מספרים, תאריכים ומטבעות בינלאומיים. זה מאפשר לך לטפל בפורמטים שונים של נתונים בהתאם למקום.

API זה פותר את האתגר של עיצוב נתונים עבור תרבויות ושפות שונות. זה מקל על עיצוב מספרים עם סמל המטבע או התאריכים המתאימים תוך שימוש בתבנית התאריך המתאימה לאזור ספציפי.

באמצעות Intl API, אתה יכול ליצור יישומי אינטרנט הנגישים וקלים לשימוש עבור קהלים ברחבי אזורים ותרבויות.

קבלת מיקום משתמש

ה בוני JavaScript המסופק על ידי Intl API מזהים את המקום שבו הם ישתמשו לעיצוב התאריך, הטקסט, המספר וכו', לפי תבנית מוכרת. כל בנאי לוקח א מקומי ו אפשרויות אובייקט כטיעונים. באמצעות ארגומנטים אלה, הבנאי מתאים את המקום(ים) המבוקשים אל מול המקומות שבהם הם תומכים כעת.

כדי לקבל את המקום של משתמש, אתה יכול להשתמש ב- navigator.language תכונה. מאפיין זה מחזיר מחרוזת המייצגת את גרסת השפה של הדפדפן.

הערך של ה navigator.language מאפיין הוא תג שפה BCP 47, המורכב מקוד שפה, ולחלופין, מקוד אזור ותגי משנה אחרים. לדוגמה, "en-US" מייצג אנגלית כפי שהיא מדוברת בארצות הברית.

instagram viewer

אתה יכול גם להשתמש ב navigator.languages מאפיין כדי לקבל מערך של השפות המועדפות על המשתמש, ממוינים לפי עדיפות. הפריט הראשון במערך מייצג את העדפת השפה הראשית של המשתמש.

לאחר שהשגת את המקום של המשתמש, תוכל להתאים אישית את תצוגת התאריכים, השעות, המספרים והמטבעות של היישום שלך באמצעות Intl ממשק API.

אתה יכול ליצור פשוט פונקציית JavaScript כדי לעזור לך לקבל את המקום של משתמש. הנה קטע קוד שיכול לעזור:

const getUserLocale = () => {
אם (navigator.languages ​​&& navigator.languages.length) {
לַחֲזוֹר navigator.languages[0];
 }
לַחֲזוֹר navigator.language;
};
לְנַחֵם.log (getUserLocale());

זֶה getUserLocale הפונקציה מחזירה את הרכיב הראשון של המאפיין navigator.languages ​​אם הוא זמין. אחרת, זה נופל בחזרה למאפיין navigator.language, המייצג את השפה המועדפת על המשתמש בדפדפנים ישנים יותר.

עיצוב תאריכים עבור אזורים שונים

כדי לעצב תאריכים באמצעות Intl API, אתה יכול להשתמש ב- Intl. DateTimeFormat() בַּנַאִי. בנאי זה לוקח שני ארגומנטים: מחרוזת מקומית ואובייקט אפשרויות.

אובייקט האפשרויות יכול להכיל מאפיינים השולטים בעיצוב התאריך.

חלק מהאפשרויות הנפוצות כוללות:

  • יוֹם חוֹל: אפשרות זו מציינת את הפורמט של היום בשבוע. אתה יכול להגדיר אותו לשניהם ארוך (יוֹם שִׁישִׁי), קצר (ו'), או לְצַמְצֵם (ו).
  • שָׁנָה: אפשרות זו מציינת את פורמט השנה. אתה יכול להגדיר אותו לשניהם מספרי (2023) או דו ספרתי (23).
  • חוֹדֶשׁ: אפשרות זו מציינת את פורמט החודש. אתה יכול להגדיר אותו לשניהם מספרי (3), דו ספרתי (03), ארוך (מרץ), קצר (מארס), או לְצַמְצֵם (M).
  • יְוֹם: אפשרות זו מציינת את פורמט היום. אתה יכול להגדיר אותו לשניהם מספרי (2) או דו ספרתי (02).

הנה דוגמה שמראה כיצד לעצב תאריך באמצעות ה Intl. DateTimeFormat() בַּנַאִי:

const תאריך = תַאֲרִיך.עַכשָׁיו()
const locale = getUserLocale();
const אפשרויות = {
 יוֹם חוֹל: "ארוך",
 שָׁנָה: "מספרי",
 חוֹדֶשׁ: "ארוך",
 יְוֹם: "מספרי",
};


const מעצב = חָדָשׁIntl.DateTimeFormat (מקומי, אפשרויות);
// יום חול, תאריך חודש, שנה (שישי, 24 במרץ, 2023)
לְנַחֵם.log (formatter.format (תאריך));

קוד זה מגדיר אובייקט מעצב על ידי העברת המקום של המשתמש אליו Intl. DateTimeFormat(), יחד עם סט אפשרויות. לאחר מכן הוא משתמש בפורמט כדי להפוך את התאריך הנוכחי למחרוזת. ה אפשרויות האובייקט מכיל מאפיינים השולטים בעיצוב התאריך.

עיצוב סוגים שונים של מספרים

אתה יכול להשתמש ב Intl API לעיצוב מספרים באמצעות ה Intl. NumberFormat() בַּנַאִי. כמו Intl. DateTimeFormat(), בנאי זה לוקח מחרוזת מקומית ואובייקט אפשרויות כארגומנטים.

אובייקט האפשרויות מכיל מאפיינים השולטים בעיצוב המספר. מאפיינים אלה משתנים בהתאם לצוין סִגְנוֹן של המספר.

עיצוב עשרוניים ואחוזים

אתה יכול לעצב מספרים כעשרונים ואחוזים באמצעות Intl. NumberFormat() בנאי על ידי הגדרת מאפיין הסגנון ל נקודה עבור עשרונים ו אָחוּז עבור אחוזים.

הנה דוגמה שמראה כיצד לעצב עשרוני:

const מספר = 123456;
const locale = getUserLocale(); // en-US
const אפשרויות = {
 סִגְנוֹן: "נקודה",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 useGrouping: נָכוֹן,
};


const מעצב = חָדָשׁIntl.NumberFormat (מקומי, אפשרויות);
לְנַחֵם.log (formatter.format (num)); // 123,456.00

גוש הקוד שלמעלה מעצב 123,456 כעשרוני עם מפרידי קיבוץ (,) ושני מקומות עשרוניים.

הנה דוגמה שמראה כיצד לעצב אחוז:

const מספר = 123456;
const locale = getUserLocale();
const אפשרויות = {
 סִגְנוֹן: "אָחוּז",
 useGrouping: נָכוֹן,
};


const מעצב = חָדָשׁIntl.NumberFormat (מקומי, אפשרויות);
לְנַחֵם.log (formatter.format (num)); // 12,345,600%

בלוק הקוד שלמעלה מבטא 123,456 כאחוז עם מפרידי קיבוץ.

עיצוב מטבעות

ניתן לעצב מספרים כמטבעות על ידי הגדרת מאפיין הסגנון ל מַטְבֵּעַ. עליך להגדיר אפשרויות נוספות לצדו, כגון:

  • מַטְבֵּעַ: מחרוזת המייצגת את קוד המטבע ISO 4217 (כגון "USD", "EUR" או "JPY") לשימוש לעיצוב. אם לא תספק את האפשרות הזו, המעצב יבחר קוד מטבע על סמך המקום של המשתמש.
  • תצוגת מטבע: מאפיין זה מציין כיצד הדפדפן אמור להציג את המטבע. זה יכול להיות סֵמֶל (75 דולר ארה"ב), קוד (75 דולר ארה"ב), או שֵׁם (75 דולר אמריקאי).

הנה דוגמה שמראה כיצד ניתן לעצב מטבע:

const מספר = 123456;
const locale = getUserLocale(); // en-US
const אפשרויות = {
 סִגְנוֹן: "מַטְבֵּעַ",
 מַטְבֵּעַ: "דולר אמריקאי",
 תצוגת מטבע: "קוד",
};


const מעצב = חָדָשׁIntl.NumberFormat (מקומי, אפשרויות);
לְנַחֵם.log (formatter.format (num)); // 123,456.00 דולר ארה"ב

בלוק הקוד שלמעלה מעצב 123,456 כמטבע (USD).

עיצוב יחידות

אתה יכול להשתמש ב Intl. NumberFormat() בנאי לעיצוב מספרים ביחידות, כגון אורך, נפח ומסה. אתה יכול לעשות זאת על ידי הגדרת ה סִגְנוֹן ל יחידה. כאשר אתה מגדיר את הסגנון ליחידה, עליך לציין את האפשרויות הבאות:

  • יחידה: מאפיין זה מציין את היחידה לשימוש עבור עיצוב, כגון "מטר", "קילוגרם", "ליטר", "שני" וכן הלאה.
  • תצוגה יחידה: מאפיין זה מציין כיצד הדפדפן אמור להציג את היחידה. אתה יכול להגדיר אותו לשניהם ארוך (10 ליטר), קצר (10 ליטר), או לְצַמְצֵם (10 ליטר).

הנה דוגמה שמראה כיצד ניתן לעצב יחידות:

const מספר = 123456;
const locale = getUserLocale();
const אפשרויות = {
 סִגְנוֹן: "יחידה",
 יחידה: "לִיטר",
 תצוגת יחידה: "ארוך",
};


const מעצב = חָדָשׁIntl.NumberFormat (מקומי, אפשרויות);
לְנַחֵם.log (formatter.format (num)); //123,456 ליטר

בלוק הקוד שלמעלה מעצב את המספר 123,456 כיחידה בליטרים.

חלופות ל-API Intl

ה-API Intl מספק קבוצה חזקה וגמישה של כלים לעיצוב תאריכים, מספרים, מטבעות ויחידות ביישומי JavaScript. הוא תומך באזורים רבים ומספק דרך עקבית לעצב נתונים על פני תרבויות ושפות שונות.

ייתכן שתרצה להשתמש בספרייה חלופית, כמו Luxon או Day.js, עקב תמיכה מוגבלת בדפדפן עבור Intl. בסופו של דבר, ההחלטה בין Intl API או חלופה תלויה בדרישות ובאילוצים הספציפיים של הפרויקט שלך.