• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

Numeral.js : آموزش کتابخانه جاوااسکریپت برای قالب بندی و دستکاری در اعداد

0 1942 ۱۲ آذر ۹۳

در این مطلب میخوام یک کتابخونه Javascript ، بنام Numeral خدمتتون معرفی کنم و کمی در مورد اون براتون توضیح بدم و بعضی از قابلیتهای اون رو بهتون آموزش بدم.

با استفاده از Numeral میتونین اعدادتون رو به قالبهای گوناگونی از قبیل واحد پول ( Currency ) ، زمان ( Time) ، درصد ( Percentage ) و ... تغییر بدین و اعدادتون رو برای کاربرانتون معنی دار کنید.

برای شروع ابتدا به صفحه مورد نظر در سایت Github برید و فایلهای مورد نظر رو دانلود کنید :

numeral2

 

با این کار یک فایل Zip براتون دانلود میشه که محتوی همه موارد مربوط به این کتابخونه هست.

ما در این مطلب فقط به فایل numeral.min.js نیاز داریم ، که حجم اون تقریبا 11KB هست و اونو در آخر همین مطلب قرار دادم که میتونین اونو دانلود کنید و استفاده کنید.

نحوه استفاده :

در ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

تا اینجا کدهای HTML رو قرار دادیم و در آخر هم فایل numeral.min.js رو اضافه کردیم و بعد از اون هم یک تگ باز و بسه Script قرار دادیم که میتونیم کدهای خودمون رو در اونجا قرار بدیم.

این کتابخونه از چند قالب بندی زیر پشتیبانی میکنه :

  • Numbers : برای قالب بندی اعداد بکار میره

  • Currency : برای قالب بندی بصورت پولی بکار میره

  • Bytes : قالب بندی بصورت بایتی

  • Percentages : قالب بندی بصورت درصدی

  • Time : قالب بندی بصورت زمان

هر نوع قالب بندی چند نوع متفاوت داره که برای استفاده از هر کدوم باید از ستون Format در عکس های زیر کمک بگیرین. این عکسهایی که قرار دادم از خود سایت هست و میتونین کل اونا رو در Numeral ببینید. کاری که شما میکنید ، اینه که اول نوع قالب بندی که میخواین رو پیدا کنید و در ستون Format ، قالب اون رو دریافت کنید. روش استفاده از اونا رو در کمی پایینتر توضیح میدم.

Numeral :

numeral3

در ستون Number یک عدد قرار داده شده که ورودی هست. در قسمت Format ، قالب مورد نظر بر روی این عدد اعمال میشه و در ستون String خروجی که بصورت رشته و قالب بندی شده است رو براتون نوشته.

Currency :

numeral4

Bytes :

numeral5

Percentage :

numeral6

Time :

numeral7

Format :

حالا فرض کنید قالب مدنظرتون رو از میان موارد بالا پیدا کردین. برای استفاده از اون باید از روش زیر استفاده کنید:

دیدین که ابتدا عدد مورد نظرمون رو به numeral پاس دادیم و سپس قالب مورد نظرمون رو هم به format پاس دادیم و کل عبارت رو در متغیر string ذخیره کردیم. خروجی یک رشته است که براتون بعد از // قرار دادم. میبینید که چقد راحت قالب بندی اعمال شد. برای موارد دیگه هم میتونین به همین صورت عمل کنید.

Unformat :

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

درون تابع unformat هرگونه رشته ی قالب بندی شده رو قرار بدین و خروجی اون یک عدد خالص بدون قالب خواهد بود.

Manipulate :

شما همچنین میتونین روی اعدادتون دستکاری کنید و روی اونا ضرب و تقسیم و جمع و تفریق انجام بدین.

برای اینکار ابتدا باید بک عدد به تابع numeral ، بعنوان ورودی بدین و سپس با استفاده از تابع add عدد مورد نظر رو با اون جمع کنید. میتونین از موارد زیر هم استفاده کنید:

numeral8

Numeral امکانات فراوان دیگه ای هم در اختیارتون قرار میده که میتونین خودتون اونارو مطالعه کنید.

امیدوارم بدردتون بخوره.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram