افزودن یک خط جدید به string در زبان JavaScript

افزودن یک خط جدید به string در زبان javascript

دستکاری string در زبان JavaScript یکی از مواردی است که یادگیری آن آسان اما تسلط بر آن سخت است زیرا در stringهای مختلف با چالش‌های متفاوتی روبرو هستید. اگر تابه‌حال به افرودن کاراکتری نیاز داشته‌اید که خط جدیدی در string به‌وجود بیاورد، این مقاله می‌تواند به شما کمک کند.

چگونه می‌توان یک خط جدید را به string اضافه کرد؟

در زبان JavaScript و بسیاری از زبان‌های برنامه‌نویسی دیگر، کاراکتری که برای افزودن یک خط جدید استفاده می‌شود، \n است. تنها کاری که نیاز است انجام دهید، اضافه کردن \n در جایی است که می‌خواهید خط شکسته شود:

const testStr = "Hello, World,\nand all you beautiful people in it!"

console.log(testStr);
/*
Hello, World,
and all you beautiful people in it!
*/

توجه داشته باشید که اگر بعد از کاراکتر \n، فاصله‌ای قرار دهید، بر روی متن اصلی تاثیر می‌گذارد. برای درک بهتر این موضوع به مثال زیر توجه کنید:

const testStr = "Hello, World,\n and all you beautiful people in it!"

console.log(testStr);
/*
Hello, World,
 and all you beautiful people in it! 
*/

با Template literals که گاهی اوقات Template strings نامیده می‌شود و در ES6 معرفی شده، اضافه کردن یک خط جدید آسان‌تر هم شده است. برای استفاده از این قابلیت نیاز است که stringهای خود را به‌جای قرار دادن در ' (single quotation) یا " (double quotation) در ` (backticks) قرار دهید. یکی از مواردی که باعث خاص بودن Template literals می‌شود این است که هر فضای خالی در string به‌وجود بیاورید، در خروجی هم به همان صورت خواهد بود.

const testStr = `Hello, World,
and all you beautiful people in it!`;

console.log(testStr);
/*
Hello, World,
and all you beautiful people in it!
*/

اما اگر بخواهید یک خط جدید به string خود در صفحه وب اضافه کنید، می‌بایست چه کرد؟

چگونه یک string که خط‌های جدید به آن اضافه شده را به DOM اضافه کنیم؟

تصور کنید که کد زیر را در اختیار دارید:

  • HTML:
<div id="ovde"></div>
  • CSS:
div {
  font-size: 2em;
  font-weight: bold;
}
  • JavaScript:
let customItems = "1,2,3";
customItems = customItems.split(",");

console.log(customItems); // ["1", "2", "3"]

for (let i = 0; i < customItems.length; i++) {
  customItems[i] = "- " + customItems[i] + "\n";
}

console.log(customItems); // ["- 1\n", "- 2\n", "- 3\n"]

customItems = customItems.join("");

console.log(customItems); // "- 1\n- 2\n- 3\n"

document.getElementById("ovde").innerHTML = customItems;

شاید کدهای بالا کارساز به‌نظر برسند. با استفاده از split مقادیر string را به array تبدیل کردیم و سپس "- " را به ابتدا و "\n" را به انتهای هر ایندکس از array اضافه کردیم. سپس با استفاده از join تمام ایندکس‌های array را به یک string واحد تبدیل کردیم. اما خروجی کدهای بالا به صورت زیر است:

خروجی نمونه کد اولیه

این موضوع حتی عجیب‌تر هم می‌شود زیرا در inspect صفحه می‌توانید شکسته شدن خط‌ها را مشاهده کنید:

مشاهده سورس صفحه با استفاده از ابزار inspect

راه حل

بسته به شرایط، چندین راه حل وجود دارد.

۱) راه حل اول

یکی از راه حل‌ها این است که در کد JavaScript خود به‌جای کاراکتر \n از تگ <br> استفاده کنید.

let customItems = "1,2,3";
customItems = customItems.split(",");

for (let i = 0; i < customItems.length; i++) {
  customItems[i] = "- " + customItems[i] + "<br>";
}

customItems = customItems.join("");

document.getElementById("ovde").innerHTML = customItems;

خروجی کدهای بالا:

خروجی دلخواه در صفحه وب

اما توجه داشته باشید که تگ <br> برای اهداف خاصی استفاده می‌شود، با توجه به MDN این تگ فقط برای شکستن خط در متن‌هایی مانند یک آدرس پستی یا یک شعر است و نباید از آن برای شکستن خط در یک پاراگراف یا افزایش فاصله بین المنت‌های مختلف استفاده کرد.

۲) راه حل دوم

در این راه حل از CSS استفاده می‌کنیم که گزینه بهتری است. بیایید دوباره با کدهای اولیه‌ای که نوشته بودیم این موضوع را حل کنیم.

let customItems = "1,2,3";
customItems = customItems.split(",");

for (let i = 0; i < customItems.length; i++) {
  customItems[i] = "- " + customItems[i] + "\n";
}

customItems = customItems.join("");

document.getElementById("ovde").innerHTML = customItems;

حال فقط با افزودن یک property در کدهای CSS، مشکل حل می‌شود.

div {
  font-size: 2em;
  font-weight: bold;
  white-space: pre-wrap;
}

شما با استفاده از ویژگی white-space می‌توانید فضاهای خالی موجود در متن را مدیریت کنید. با استفاده از مقدار pre-wrap اگر فاصله یا خط جدیدی در متن وجود داشته باشد، به‌خوبی در صفحه نمایش داده می‌شود. برای اطلاعات بیشتر از ویژگی white-space می‌توانید به مستندات آن در MDN مراجعه کنید.

منبع: https://www.freecodecamp.org/news/how-to-add-a-new-line-in-a-string-solved

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

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

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

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

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi