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

تبدیل تاریخ میلادی به شمسی در جاوا اسکریپت فقط با Intl API

توجه: مطالبی که در این مقاله تبدیل تاریخ میلادی به شمسی در جاوااسکریپت گفته شده بطور مفصل تر و جامع تر در مثال عملی در دوره جامع و صفر تا صد ساخت تقویم فارسی با جاوا اسکریپت به همراه مناسبتها گفته شده، توصیه میشه برای درک بهتر و عمیق تر این موضوع که چطور می تونیم تاریخ و اعداد میلادی رو به فارسی در جاوااسکریپت تبدیل کنیم، می تونید از این دوره جامع ساخت تقویم فارسی استفاده کنید.

زمانی که داشتم شروع به نوشتن این مقاله می کردم، با خودم گفتم یادش بخیر، قبلنا برای این که بخوام تاریخ میلادی رو به شمسی و اعداد انگلیسی رو به فارسی تبدیل کنم، باید از یکسری از کتابخانه هایی مثل moment.js که حجم بالایی هم داره و یا از یکسری از توابع های ویژه ای استفاده کنم تا بتونم این تبدیلات رو انجام بدم.

همانطور که می دونید، هر چند وقت هسته جاوا اسکریپت و مرورگرها رو بهبود میدن، قوی ترش میکنن و در کل قابلیت های بیشتری رو اضافه میکنند که اصطلاحا موتورشون رو قوی تر میکنن تا امکانات بیشتری رو در اختیار برنامه نویسان قرار بدن.

حالا برای تبدیل تاریخ میلادی به فارسی به فرمت های مختلف و تبدیل اعداد انگلیسی به فارسی و جدا کننده اعداد و نمایش تاریخ نسبی مثل 1 روز بعد و …، به این موتور قابلیت جذابی رو اضافه کردن که اکثر مرورگر ها (از فایرفاکس 29 و کروم 24 به بعد) این قابلیت رو پشتیبانی می کنند، این قابلیت چیزی نیست جز شئ سراسری Intl API، که درون این اینترفیس یکسری متدهای پرکاربرد وجود داره که در ادامه بررسی خواهیم کرد.

معرفی شئ سراسری Intl

حالا رفقای گلم، الان وقت اینه که بیاییم شئ سراسری Intl رو بررسی کنیم، پس ادیتورتون رو باز کنید و دقیقا مثل بنده عبارتی که در تصویر زیر مشاهده می کنید رو بنویسید و بعد از دات، کلید ترکیبی ctrl + space رو بزنید تا متدهایی که داخل این شئ سراسری Intl وجود داره به ما نمایش داده بشه:

متدهایی که مشاهده می کنید شامل موارد زیر هستش که در این مقاله مورد 1 و 2 و 3 رو بررسی می کنیم :

1. DateTimeFormat
2. RelativeTimeFormat
3. NumberFormat
4. Collator
5. DisplayNames
6. Locale
7. PluralRules

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

ابتدا متد DateTimeFormat رو بررسی کنیم.

نمایش شمسی تاریخ میلادی با استفاده از متد DateTimeFormat

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

و اما ساختار کلی متد به صورت زیر هستش، که این متد 2 تا ورودی میگیره، که ورودی اول مربوط به زبان کشور مورد نظر هستش که می خواهیم تاریخ میلادی رو به اون زبان مورد نظر تبدیل کنیم و ورودی دوم مربوط به تنظیمات این متد هستش که می خواهیم فرمت نمایش تاریخ رو تعیین کنیم :

let dateFormat = new Intl.DateTimeFormat("Language",options);

برای نمونه بیاییم بدون هیچ تنظیمی و فقط با تعیین فرهنگ فارسی خروجی کار رو ببینیم :

1. let date = Date.now();
2. let dateFormat = new Intl.DateTimeFormat("fa").format(date);
3. console.log(dateFormat);

1. در خط اول، زمان حال سیستم رو بر حسب میلی ثانیه دریافت کردیم و داخل متغیر date ریختیم.
2. در خط دوم، وارد شئ سراسری Intl شدیم و متد DateTimeFormat رو فراخوانی کردیم و به عنوان ورودی اول زبان فارسی رو مشخص کردیم و در ادامه حتما باید متد format رو هم فراخوانی کنیم و زمان رو برای این متد format بفرستیم، تا تاریخ میلادی رو به فرهنگی که براش مشخص کردیم بیاد تبدیل کنه و اینکه که هیچ تنظیماتی هم به عنوان ورودی دوم برای این متد DateTimeFormat مشخص نکردیم.
3. در خط سوم، می خواهیم خروجی کارمون رو در کنسول ببینیم.

اگر خروجی کد بالا رو در کنسول ببینیم تاریخ میلادی رو به فرمت ۱۴۰۲/۱۰/۲ نمایش میده، حالا وقت این هست که Options های مربوط به متد DateTimeFormat رو بررسی کنیم که شما با توجه به فرمتی که در نظر دارید به خروجی مورد نظرتون برسید.

{
weekday: 'narrow' | 'short' | 'long',
era: 'narrow' | 'short' | 'long',
year: 'numeric' | '2-digit',
month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long',
day: 'numeric' | '2-digit',
hour: 'numeric' | '2-digit',
minute: 'numeric' | '2-digit',
second: 'numeric' | '2-digit',
timeZoneName: 'short' | 'long',
hour12: true | false,
hourCycle: 'h11' | 'h12' | 'h23' | 'h24',
formatMatcher: 'basic' | 'best fit'
}

ویژگی هایی که در بالا مشاهده می کنید، می تونید یک مقداری رو براشون با توجه به فرمتی که در نظر دارید مشخص کنید که در ادامه چندین نمونه رو بررسی خواهیم کرد، و به طور کامل نحوه استفاده از این Option ها رو متوجه خواهید شد.

نمایش تاریخ شمسی با فرمت «۱۴۰۲ دی ۲, شنبه»

برای رسیدن به فرمت بالا باید برای متد DateTimeFormat یکسری Option هایی رو مشخص کنیم چرا که در حالت عادی بدون استفاده از تنظیماتی، بهمون با فرمت ۱۴۰۲/۱۰/۲ نمایش میده، و اما برای رسیدن به فرمت بالا باید Option های زیر رو برای متدمون مشخص کنیم، پس به عنوان ورودی دوم داخل آبجکت، ویژگی های مورد نظرمون با مقدار مورد نظر رو مشخص می کنیم:

let date = Date.now();
let dateFormat = new Intl.DateTimeFormat("fa",{
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
}).format(date);
console.log(dateFormat);

نمایش تاریخ شمسی با فرمت «۲ دی ۱۴۰۲»

برای رسیدن به فرمت بالا Option های زیر رو برای متدمون داخل آبجکتمون مشخص کنیم:

let date = Date.now();
let dateFormat = new Intl.DateTimeFormat("fa",{
month: "long",
day: "numeric",
year: "numeric"
}).format(date);
console.log(dateFormat);

نکته : برای این که بخواهیم با استفاده از متد toLocaleDateString به فرمت 2 دی 1402 برسیم ( این روش قدیمی هستش و توصیه میشه که برای برنامه های جدید، از همان شئ سراسری new Intl استفاده کنید) ساختار کدمون به صورت زیر میشه:

console.log(
new Date().toLocaleDateString("fa",{
month: "long",
day: "numeric",
year: "numeric"
})
);

نمایش تاریخ شمسی با فرمت «۰۲/۱۰/۲, ۲۰:۰۳»

موردی که در فرمت بالا باید دقت کنید این هست که، 2 رقم آخر سال 1402 نمایش داده میشه که برای رسیدن به این فرمت باید Option های زیر رو برای متدمون مشخص کنیم:

let date = Date.now();
let dateFormat = new Intl.DateTimeFormat("fa",{
year: "2-digit",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric"
}).format(date);
console.log(dateFormat);

نمایش تاریخ شمسی با فرمت «۰۲/۱۰/۰۲, ۲۰:۱۶ (‎+۳:۳۰ گرینویچ)»

اگر خواستید اعداد ماه و روز، دو رقمی باشن، می تونید مقدار 2-digit رو صریحا ذکر کنید :

let date = Date.now();
let dateFormat = new Intl.DateTimeFormat("fa",{
year: "2-digit",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
timeZoneName: "short"
}).format(date);
console.log(dateFormat);

نمایش تاریخ های نسبی با استفاده از متد RelativeTimeFormat

برای نمایش تاریخ های نسبی، می تونیم از متد RelativeTimeFormat استفاده کنیم، که اگر خروجی کد زیر رو در کنسول مشاهده کنید، خواهید دید که 1 روز پیش و 1 روز بعد رو نمایش میده :

const result = new Intl.RelativeTimeFormat("fa",{
localeMatcher: "best fit", //other values: "lookup"
numeric: "always", //other values: "auto"
style: "long" //other values: "short" or "narrow"
console.log(result.format(-1,"day"));
console.log(result.format(1,"day"));

تبدیل اعداد انگلیسی به فارسی با استفاده از متد NumberFormat

یکی از روش های تبدیل اعداد انگلیسی به فارسی، این هست که با استفاده از یکسری از متدها عملیات replace کردن حروف و اعداد رو انجام بدیم، ولی با استفاده از این متد NumberFormat دیگه نیازی به یکسری کارهای طولانی نیست.

نمونه کد زیر رو در نظر بگیرید، که خروجی این کد به صورت ۱۲۳٬۴۵۶ هستش، که برای این متد فقط فرهنگ فارسی رو مشخص کردیم و هیچ Option ای هم به این متد اضافه نکردیم، و نکته ای که وجود داره اینه که، در خروجی این کد جداکننده هزارگان هم قرار داده:

console.log(new Intl.NumberFormat("fa").format(123456));

برای این که بخواهیم این جداکننده هزارگان رو نمایش ندیم و کلا برداریمش (۱۲۳۴۵۶)، می تونیم ویژگی useGrouping رو بنویسیم و مقدارش رو برابر false قرار بدیم :

console.log(new Intl.NumberFormat("fa",{useGrouping:false}).format(123456));

اگر به عنوان ورودی برای متد format مقدار غیر عددی رو وارد کنیم در خروجی کد بهمون مقدار ناعدد رو نمایش میده:

console.log(new Intl.NumberFormat("fa").format("همیار جاوا اسکریپت"));

برای نمایش واحد پولی کنار عددمون (‎ریال ۵٫۵۹۹) می تونیم، حالت نمایش رو به currency و نوع currency رو به IRR که ریال هستش، تنظیم کنیم :

console.log(new Intl.NumberFormat("fa",{
style:"currency",
currency: "IRR",
maximumFractionDigits: 3
}).format(5.59854664));

برای نمایش درصد پس از اعداد می تونیم از تنظیم زیر استفاده کنیم که خروجی کد زیر به صورت ۴۳٫۵٪ می شود :

console.log(new Intl.NumberFormat("fa",{
style: "percent",
maximumFractionDigits:2
}).format(0.435));