چگونه یک رشته را در جاوا اسکریپت slugify کنیم

Slug رشته‌ای است که برای شناسایی منحصربه‌فرد یک منبع به روش URL-پسند استفاده می‌شود. معمولاً در URL برای شناسایی یک صفحه خاص یا پست در یک وب سایت استفاده می شود. Slug شامل مجموعه ای از کاراکترهایی است که به راحتی قابل خواندن و به خاطر سپردن هستند و محتوای منبع را به دقت توصیف می کنند.

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

• از نویسه های حروف عددی کوچک (az,0-9) و خط فاصله (-) تشکیل شده است.
• این شامل هیچ فاصله یا کاراکتر ویژه دیگری نیست.
• این به طور دقیق و مختصر محتوای منبعی را که شناسایی می کند توصیف می کند.
• در زمینه وب سایت یا برنامه منحصر به فرد است.

به عنوان مثال، URL زیر را در نظر بگیرید https://byby.dev/react-data-fetching-libraries. در این URL، react-data-fetching-libraries اسلاگی است که پست وبلاگ خاص را شناسایی می کند.

یک slugify ساده

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

function slugify(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim leading/trailing white space
  str = str.toLowerCase(); // convert string to lowercase
  str = str.replace(/[^a-z0-9 -]/g, '') // remove any non-alphanumeric characters
           .replace(/\s+/g, '-') // replace spaces with hyphens
           .replace(/-+/g, '-'); // remove consecutive hyphens
  return str;
}

const title = "The Quick Brown Fox Jumps Over The Lazy Dog!";
const slug = slugify(title);
console.log(slug); // "the-quick-brown-fox-jumps-over-the-lazy-dog"

استفاده از کتابخانه

چندین کتابخانه در جاوا اسکریپت موجود است که می توان از آنها برای کوچک کردن یک رشته بدون نیاز به نوشتن کد سفارشی استفاده کرد.

• lodash (56k ⭐) – این کتابخانه طیف گسترده ای از توابع کاربردی را برای جاوا اسکریپت فراهم می کند، از جمله kebabCase تابعی که می توان از آن برای تبدیل رشته به قاب کباب استفاده کرد که شبیه فرمت اسلاگ است. قالب کباب یک نام گذاری است که در آن کلمات با خط فاصله (-) از هم جدا می شوند و همه حروف با حروف کوچک هستند.

const _ = require('lodash');

const myString = 'Hello World';
const kebabCaseString = _.kebabCase(myString);

console.log(kebabCaseString); // Output: hello-world

• Voca (3.5k ⭐) – کتابخانه Voca عملکردهای مفیدی را برای راحت کردن دستکاری رشته ارائه می دهد: تغییر قاب، برش، پد، slugify، latinise، sprintf’y، کوتاه کردن، فرار و موارد دیگر. در Voca، slugify تابعی است که یک رشته را به فرمت اسلاگ مناسب URL تبدیل می کند.

const { slugify } = require('voca');

const myString = 'Hello World!';
const slugifiedString = slugify(myString);

console.log(slugifiedString); // Output: hello-world

• @sindresorhus/slugify (2.3k ⭐) – برای URL ها، نام فایل ها و شناسه ها مفید است. این زبان بیشتر زبان های اصلی از جمله آلمانی (umlauts)، ویتنامی، عربی، روسی و غیره را مدیریت می کند.

const slugify = require('@sindresorhus/slugify');

slugify('I ♥ Dogs'); // i-love-dogs
slugify('  Déjà Vu!  '); // deja-vu
slugify('fooBar 123 $#%'); // foo-bar-123
slugify('я люблю единорогов'); // ya-lyublyu-edinorogov

slugify('BAR and baz', {separator: '_'}); // bar_and_baz
slugify('BAR and baz', {separator: ''}); // barandbaz

• slugify (1.2k ⭐) – این کتابخانه شامل یک تابع ساده slugify در جاوا اسکریپت وانیلی ES2015 است، هیچ وابستگی ندارد، نمادهای خارجی را به معادل انگلیسی خود وادار می کند، در مرورگر (window.slugify) و لودرهای ماژول با طعم AMD/CommonJS کار می کند.

const slugify = require('slugify');

slugify('some string'); // some-string

// if you prefer something other than '-' as separator
slugify('some string', '_');  // some_string

شما هم ممکن است دوست داشته باشید