کار با رشته‌ها در جاوااسکریپت؛ متن پویا و عدد فارسی

اگر یک سایت فارسی طراحی می‌کنید، مدیریت متن فقط چسباندن چند جمله به هم نیست. فاصله‌های ابتدا و انتها، حرف‌های عربی و فارسی، اعداد نمایشی و حتی شمارش کاراکترها می‌توانند نتیجه را تغییر دهند. در درس چهارم، یک پیام پیشرفت می‌سازیم و سپس همان ایده را به جست‌وجو و نمایش قیمت گسترش می‌دهیم. نمونه‌ها مستقل‌اند و در Console تازهٔ مرورگر قابل اجرا هستند.

رشته چیست و چرا تغییرناپذیر است؟

رشته را می‌توان با کوتیشن تکی، کوتیشن دوتایی یا backtick ساخت. نوع رشتهٔ اولیه تغییرناپذیر است: متدهایی مانند trim و toUpperCase معمولاً یک رشتهٔ تازه برمی‌گردانند و مقدار اصلی را درجا عوض نمی‌کنند. بنابراین اگر نتیجه را لازم دارید، آن را ذخیره کنید. نخستین جایگاه رشته صفر است. متد slice بخشی از رشته را می‌سازد، اما برای بریدن متن دارای ایموجی و نشانه‌های ترکیبی باید مسئلهٔ Unicode را هم در نظر گرفت.

const rawTitle = "  JavaScript پایه  ";
const cleanTitle = rawTitle.trim();
console.log(cleanTitle); // JavaScript پایه
console.log(rawTitle === cleanTitle); // false
console.log(cleanTitle.startsWith("JavaScript")); // true
console.log(cleanTitle.includes("پایه")); // true

ساخت پیام با Template Literal

داخل backtick می‌توانید عبارت را در قالب ${...} قرار دهید. این روش برای متن چندخطی یا جمله‌ای با چند مقدار، معمولاً خواناتر از چند اتصال + است. رشتهٔ ساخته‌شده خودش به HTML تبدیل نمی‌شود؛ نحوهٔ درج آن در صفحه را API انتخابی تعیین می‌کند. برای پیام متنی کاربر، textContent انتخاب ساده‌ای است. استفاده از Template Literal به‌تنهایی دادهٔ ورودی را امن یا پاک‌سازی نمی‌کند.

const learnerName = "نیما";
const completed = 4;
const total = 20;
const message = `${learnerName}، ${completed} درس از ${total} درس را خوانده‌اید.`;
console.log(message);
// نیما، 4 درس از 20 درس را خوانده‌اید.

جست‌وجوی قابل پیش‌بینی در متن فارسی

کلمه‌ای که با ی فارسی نوشته شده، ممکن است با نمونهٔ دارای ي عربی تطابق مستقیم نداشته باشد. برای جست‌وجوی داخلی می‌توانید از هر دو طرف یک نسخهٔ نرمال‌شده بسازید و اصل نوشته را برای نمایش نگه دارید. normalize با NFC برخی نمایش‌های معادل Unicode را هماهنگ می‌کند، اما به‌تنهایی همهٔ تفاوت‌های زبانی مانند ک و ك را برطرف نمی‌کند. جایگزینی این دو حرف، تصمیم محصول برای جست‌وجوست و نباید بی‌فکر روی نام‌ها و دادهٔ مرجع اعمال شود.

const original = "  آموزش جاوااسكريپت  ";
const searchable = original.normalize("NFC").trim()
  .replaceAll("ي", "ی").replaceAll("ك", "ک");
const query = "جاوااسکریپت";
console.log(searchable.includes(query)); // true
console.log(original); // دادهٔ اصلی حفظ شده است.

عدد را عدد نگه دارید و فقط هنگام نمایش قالب بدهید

Intl.NumberFormat برای قالب‌بندی سازگار با زبان به کار می‌رود. نتیجهٔ format یک رشتهٔ نمایشی است؛ آن را به‌عنوان مبلغ اصلی در محاسبه نگه ندارید. در مثال زیر، مقدار 125000 بر حسب تومان است و نام واحد را خودمان به متن اضافه می‌کنیم. کد استاندارد IRR مربوط به ریال است؛ اگر عدد شما تومان باشد، افزودن style: currency و currency: IRR بدون تبدیل واحد برچسب نادرست می‌سازد.

const amountToman = 125000;
const formatter = new Intl.NumberFormat("fa-IR");
const priceLabel = `${formatter.format(amountToman)} تومان`;
console.log(priceLabel); // ۱۲۵٬۰۰۰ تومان
console.log(amountToman + 10000); // 135000

اگر برنامه هم نمایش فارسی و هم انگلیسی دارد، زبان قالب‌بندی را از تنظیمات معتبر انتخاب کنید و منطق محاسبه را ثابت نگه دارید. جداکنندهٔ هزارگان یک نویسهٔ نمایشی است؛ حذف آن با حدس‌زدن یک ویرگول همیشه کافی نیست. برای دریافت عدد فارسی از کاربر، مسیر تبدیل ورودی را جدا طراحی و آزمون کنید. این نمونه دربارهٔ نمایش است و ادعا نمی‌کند هر رشتهٔ قالب‌بندی‌شده را دوباره به عدد تبدیل می‌کند.

length همیشه تعداد حروف دیده‌شده نیست

رشته‌های JavaScript بر پایهٔ واحدهای UTF-16 هستند. برای نمونه، بعضی ایموجی‌ها length برابر 2 دارند و یک علامت دیده‌شده نیز می‌تواند از چند کدپوینت ساخته شود. اگر محدودیت فرم باید بر اساس نویسهٔ قابل مشاهده باشد، از ابزار مناسب مانند Intl.Segmenter با granularity برابر grapheme و بررسی سازگاری محیط استفاده کنید. برای نام فایل یا شناسه نیز هدف محدودیت را روشن کنید: طول رشته، تعداد واحدهای نمایشی و حجم بایت سه معیار متفاوت‌اند.

تمرین و پاسخ پیشنهادی

نام کاربر را از رشتهٔ دارای فاصلهٔ « سارا » بگیرید و پیامی بسازید که پیشرفت 5 درس از 20 درس را با عدد فارسی نشان دهد. سپس نام خالی را آزمایش کنید: در آن حالت «یادگیرنده» نمایش داده شود. پاسخ زیر برای این سناریوی محدود است؛ در فرم واقعی، طول نام و قواعد داده را هم بررسی می‌کنیم.

const inputName = "  سارا  ";
const displayName = inputName.trim() || "یادگیرنده";
const numberFa = new Intl.NumberFormat("fa-IR");
const progressText = `${displayName}، ${numberFa.format(5)} از ${numberFa.format(20)} درس` ;
console.log(progressText); // سارا، ۵ از ۲۰ درس

اشتباه‌های رایج

• فراموش‌کردن ذخیرهٔ نتیجهٔ trim یا replaceAll.
• استفاده از کوتیشن معمولی و انتظار جایگذاری ${value}.
• ذخیرهٔ مبلغِ دارای جداکننده به‌جای مقدار عددی اصلی.
• برچسب‌زدن ریال به عددی که در برنامه تومان تعریف شده است.
• فرض اینکه length همیشه تعداد نشانه‌های قابل مشاهده است.

منابع انگلیسی

• MDN — Numbers and strings
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_strings
• MDN — Intl.NumberFormat
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
• MDN — String.normalize
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

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