نحوه استفاده از Intl API در جاوا اسکریپت

109
0
استفاده از Intl API در جاوا اسکریپت

با متناسب کردن محتوای خود به هر زبان یا محلی با Intl API، به مخاطبان بیشتری دسترسی پیدا کنید. استفاده از Intl API در جاوا اسکریپت را در ادامه بیشتر بررسی کرده ایم.

Intl API قالب بندی و دستکاری متن بین المللی، اعداد، تاریخ ها و ارزها را ساده می کند. این به شما امکان می دهد تا فرمت های داده های مختلف را با توجه به منطقه مدیریت کنید.

این API چالش قالب بندی داده ها را برای فرهنگ ها و زبان های مختلف حل می کند. قالب بندی اعداد با نماد ارز یا تاریخ های مناسب را با استفاده از قالب تاریخ مناسب برای یک منطقه خاص آسان می کند.

دریافت Locale یک کاربر

سازنده‌های جاوا اسکریپت که توسط Intl API ارائه می‌شوند، محلی را که برای قالب‌بندی تاریخ، متن، شماره و غیره استفاده می‌کنند، بر اساس یک الگوی آشنا شناسایی می‌کنند. هر سازنده یک محلی و یک شی گزینه را به عنوان آرگومان می گیرد. با استفاده از این آرگومان ها، سازنده، محلی(های) درخواستی را با محلی هایی که در حال حاضر پشتیبانی می کنند مطابقت می دهد.

برای دریافت محلی کاربر، می توانید از ویژگی navigator.language استفاده کنید. این ویژگی رشته ای را برمی گرداند که نشان دهنده نسخه زبان مرورگر است.

مقدار ویژگی navigator.language یک برچسب زبان BCP 47 است که از یک کد زبان و در صورت تمایل، یک کد منطقه و سایر برچسب‌های فرعی تشکیل شده است. به عنوان مثال، “en-US” نشان دهنده انگلیسی است که در ایالات متحده صحبت می شود.

همچنین می‌توانید از ویژگی navigator.languages ​​برای دریافت آرایه‌ای از زبان‌های ترجیحی کاربر، مرتب‌سازی شده بر اساس اولویت استفاده کنید. اولین مورد در آرایه نشان دهنده اولویت زبان اصلی کاربر است.

پس از به دست آوردن محلی کاربر، می توانید با استفاده از Intl API، نمایش تاریخ، زمان، اعداد و ارزهای برنامه خود را سفارشی کنید.

شما می توانید یک تابع ساده جاوا اسکریپت ایجاد کنید تا به شما در دریافت محلی کاربر کمک کند. در اینجا یک قطعه کد است که می تواند کمک کند:

const getUserLocale = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  }
  return navigator.language;
};

console.log(getUserLocale());

این تابع getUserLocale اولین عنصر از ویژگی navigator.languages ​​را در صورت موجود بودن برمی‌گرداند. در غیر این صورت، به ویژگی navigator.language باز می گردد که نشان دهنده زبان ترجیحی کاربر در مرورگرهای قدیمی است.

قالب بندی تاریخ ها برای مکان های مختلف

برای قالب بندی تاریخ ها با استفاده از Intl API، می توانید از سازنده ()Intl.DateTimeFormat استفاده کنید. این سازنده دو آرگومان می گیرد: یک رشته محلی و یک شی گزینه.

شی گزینه می تواند دارای ویژگی هایی باشد که قالب بندی تاریخ را کنترل می کند.

برخی از گزینه های رایج مورد استفاده عبارتند از:

. weekday: این گزینه فرمت روز هفته را مشخص می کند. می توانید آن را روی بلند (Friday )، کوتاه (Fri) یا باریک (F) تنظیم کنید.

. year: این گزینه فرمت سال را مشخص می کند. می توانید آن را به صورت عددی (2023) یا 2 رقمی (23) تنظیم کنید.

. month: این گزینه فرمت ماه را مشخص می کند. می توانید آن را به صورت عددی (3)، 2 رقمی (03)، بلند (مارس)، کوتاه (مارس)، یا باریک (M) تنظیم کنید.

. day: این گزینه فرمت روز را مشخص می کند. می توانید آن را به صورت عددی (2) یا 2 رقمی (02) تنظیم کنید.

در اینجا مثالی وجود دارد که نحوه قالب بندی تاریخ را با استفاده از سازنده Intl.DateTimeFormat() نشان می دهد:

const date = Date.now()
const locale = getUserLocale();

const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

const formatter = new Intl.DateTimeFormat(locale, options);

// weekday, month date, year (Friday, March 24, 2023)
console.log(formatter.format(date));

این کد یک شی قالب‌کننده را با ارسال محلی کاربر به Intl.DateTimeFormat()، همراه با مجموعه‌ای از گزینه‌ها تنظیم می‌کند. سپس از فرمت‌کننده برای تبدیل تاریخ جاری به یک رشته استفاده می‌کند. شی گزینه حاوی ویژگی هایی است که قالب بندی تاریخ را کنترل می کند.

قالب بندی انواع مختلف اعداد

می توانید از Intl API برای قالب بندی اعداد با استفاده از سازنده Intl.NumberFormat() استفاده کنید. مانند Intl.DateTimeFormat()، این سازنده یک رشته محلی و یک شی گزینه را به عنوان آرگومان می گیرد.

شی گزینه حاوی ویژگی هایی است که قالب بندی عدد را کنترل می کند. این ویژگی ها بسته به سبک مشخص شده تعداد متفاوت است.

قالب بندی اعشار و درصد

می توانید اعداد را به صورت اعشاری و درصد با استفاده از سازنده Intl.NumberFormat() با تنظیم ویژگی style بر روی اعشار برای اعشار و درصد برای درصدها قالب بندی کنید.

در اینجا مثالی وجود دارد که نحوه قالب بندی اعشاری را نشان می دهد:

const num = 123456;
const locale = getUserLocale(); // en-US

const options = {
  style: "decimal",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  useGrouping: true,
};

const formatter = new Intl.NumberFormat(locale, options);

console.log(formatter.format(num)); // 123,456.00

بلوک کد بالا 123456 را به صورت اعشاری با جداکننده های گروه بندی (،) و دو رقم اعشار فرمت می کند.

در اینجا مثالی وجود دارد که نحوه قالب بندی درصد را نشان می دهد:

const num = 123456;
const locale = getUserLocale();

const options = {
  style: "percent",
  useGrouping: true,
};

const formatter = new Intl.NumberFormat(locale, options);

console.log(formatter.format(num)); // 12,345,600%

بلوک کد بالا 123456 را به عنوان درصد با جداکننده های گروه بندی بیان می کند.

قالب بندی ارزها

می توانید با تنظیم ویژگی style روی ارز، اعداد را به عنوان ارز قالب بندی کنید. شما باید گزینه های دیگری را در کنار آن تنظیم کنید، مانند:

. ارز: رشته ای که نشان دهنده کد ارز ISO 4217 (مانند «USD»، «EUR» یا «JPY») است که برای قالب بندی استفاده می شود. اگر این گزینه را ارائه نکنید، فرمت‌کننده یک کد ارز را بر اساس منطقه کاربر انتخاب می‌کند.

. currencyDisplay: این ویژگی مشخص می کند که مرورگر چگونه ارز را نمایش دهد. می تواند نماد (75 دلار آمریکا)، کد (75 دلار آمریکا) یا نام (75 دلار آمریکا) باشد.

در اینجا یک مثال نشان می دهد که چگونه می توانید ارز را قالب بندی کنید:

const num = 123456;
const locale = getUserLocale(); // en-US

const options = {
  style: "currency",
  currency: "USD",
  currencyDisplay: "code",
};

const formatter = new Intl.NumberFormat(locale, options);

console.log(formatter.format(num)); // USD 123,456.00

بلوک کد بالا 123456 را به عنوان ارز (USD) فرمت می کند.

واحدهای قالب بندی

می توانید از سازنده ()Intl.NumberFormat برای قالب بندی اعداد با واحدهایی مانند طول، حجم و جرم استفاده کنید. می توانید این کار را با تنظیم استایل روی واحد انجام دهید. وقتی استایل را روی واحد تنظیم می کنید، باید این گزینه ها را مشخص کنید:

. unit: این ویژگی واحد مورد استفاده برای قالب بندی را مشخص می کند، مانند “متر”، “کیلوگرم”، “لیتر”، “ثانیه” و غیره.

. unitDisplay: این ویژگی مشخص می کند که مرورگر چگونه باید واحد را نمایش دهد. می توانید آن را روی بلند (10 لیتر)، کوتاه (10 لیتر) یا باریک (10 لیتر) تنظیم کنید.

در اینجا یک مثال نشان می دهد که چگونه می توانید واحدها را قالب بندی کنید:

const num = 123456;
const locale = getUserLocale();

const options = {
  style: "unit",
  unit: "liter",
  unitDisplay: "long",
};

const formatter = new Intl.NumberFormat(locale, options);

console.log(formatter.format(num)); //123,456 liters

بلوک کد بالا عدد 123456 را به صورت واحد در لیتر فرمت می کند.

جایگزین های Intl API

Intl API مجموعه ای قدرتمند و انعطاف پذیر از ابزارها را برای قالب بندی تاریخ ها، اعداد، ارزها و واحدها در برنامه های جاوا اسکریپت فراهم می کند. از بسیاری از زبان‌ها پشتیبانی می‌کند و روشی ثابت برای قالب‌بندی داده‌ها در فرهنگ‌ها و زبان‌های مختلف ارائه می‌کند.

به دلیل پشتیبانی محدود مرورگر از Intl، ممکن است بخواهید از یک کتابخانه جایگزین مانند Luxon یا Day.js استفاده کنید. در نهایت، تصمیم گیری بین Intl API یا یک جایگزین به الزامات و محدودیت های خاص پروژه شما بستگی دارد.

امتیاز این مطلب
سهیل دهقانی
نوشته شده توسط

سهیل دهقانی

علاقه مند به فناوری و تکنولوژی های روز دنیا کارشناس سئو و تولید محتوا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

گوگل فارکس آموزش تخصصی آمارکتس