10 توابع مفید جاوا اسکریپت

سلام! 👋

امروز، ما 10 توابع کاربردی سفارشی را در جاوا اسکریپت پوشش خواهیم داد که می توانند در اکثر پروژه های شما مفید باشند.

فهرست مطالب

01. «console.log()».

بله، ابزاری که همه ما دوست داریم و برای چاپ، اشکال زدایی و غیره از آن استفاده می کنیم. بنابراین، چرا برای کاهش تایپ و صرفه جویی در زمان، آن را کوتاه نمی کنیم؟

const { log } = console;

log("Hello world!");
// Expected output: Hello world!

// SAME AS //

console.log("Hello world!");
// Expected output: Hello world!

توضیح: برای اینکه بتوانیم آن را استخراج کنیم از تخصیص تخریب استفاده می کنیم log روش از console.

02. «querySelector()».

هنگام کار با جاوا اسکریپت، ممکن است اصطلاح دستکاری DOM را شنیده باشید و از آن استفاده کرده باشید getElementById()، querySelector() و روش های دیگر برای دسترسی به عناصر DOM. بنابراین، بیایید آن را بسازیم آسان تر برای کار با

const select = (selector, scope = document) => {
  return scope.querySelector(selector);
};

const title = select("h1");
const className = select(".class");
const message = select("#message", formElem);

// SAME AS //

const title = document.querySelector("h1");
const className = document.querySelector(".class");
const message = formElem.querySelector("#message");

توضیح: ما در حال عبور 2 پارامتر در select() تابع:

• 1: عنصر DOM که می خواهید انتخاب کنید
• 2: محدوده ای که از آن به آن عنصر دسترسی دارید (پیش فرض = document)

03. «addEventListener()».

مدیریت کلیک، حرکت ماوس و سایر رویدادها بیشتر با addEventListener() روش.

const listen = (target, event, callback, ...options) => {
  return target.addEventListener(event, callback, ...options);
};

listen(buttonElem, "click", () => console.log("Clicked!"));

listen(document, "mouseover", () => console.log("Mouse over!"));

listen(formElem, "submit", () => {
    console.log("Form submitted!");
  }, { once: true }
);

توضیح: ما 4 پارامتر را در قسمت ارسال می کنیم listen() تابع:

• اول: عنصری که می‌خواهید هدف قرار دهید (به عنوان مثال “پنجره”، “سند” یا عنصر DOM خاص)
• دوم: نوع رویداد (به عنوان مثال “کلیک”، “ارسال”، “DOMContentLoaded”، و غیره)
• 3: عملکرد برگشت به تماس
• 4: گزینه های اختیاری باقی مانده (به عنوان مثال ‘گرفتن’، ‘یک بار’، و غیره). همچنین، ما از نحو گسترش استفاده می کنیم تا در صورت لزوم گزینه های دیگر را نیز در اختیار بگذاریم. در غیر این صورت، می توان آن را درست مانند در حذف کرد addEventListener روش.

04. “تصادفی()”.

احتمالاً از آن آگاه هستید Math.random() تابعی که اعداد تصادفی از 0 تا 1 را تولید می کند. همچنین ممکن است درباره هک های دیگری مانند Math.random() * 10، که اکنون باید اعداد تصادفی از 0 تا 10 تولید کند. با این حال، مشکل این است که با وجود دانستن حد، کنترل زیادی روی مقدار حداقل نداریم.

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

random(5, 10);
// 7

توضیح: در اینجا توضیحات بهتر توسط MDN Docs آمده است

05. “times()”.

گاهی اوقات، ما اغلب خود را به اجرای چندین عملکرد خاص نیاز داریم.

البته میتونیم استفاده کنیم setInterval() برای اجرای هر بازه زمانی به این صورت:

setInterval(() => {
  randomFunction();
}, 5000); // runs every 5 seconds

مشکل این است که ما نمی توانیم مشخص کنیم که چند بار می خواهیم آن را اجرا کنیم. پس بیایید درستش کنیم!

const times = (func, n) => {
  Array.from(Array(n)).forEach(() => {
    func();
  });
};

times(() => {
  randomFunction();
}, 3); // runs 3 times

توضیح:

• Array(n) – یک آرایه جدید با طول ایجاد می کند n.

Array(5); // => [,,]

• Array.from() – یک کپی کم عمق از ایجاد می کند Array(n). این به ما کمک می کند تا آرایه ای بسازیم که قابل استفاده باشد و آن را با «تعریف نشده» پر کنیم. شما همچنین می توانید استفاده کنید Array.prototype.fill() روشی برای رسیدن به همان نتیجه

Array.from(Array(3)); // => [undefined,undefined,undefined]

توجه داشته باشید: در حین تحقیق در مورد این تابع سودمند، متوجه شدم که برخی از برنامه نویسان ترجیح می دهند آن را قرار دهند n ابتدا پارامتر و سپس تابع times(n, func). اما برای من کمی عجیب به نظر می رسید، بنابراین تصمیم گرفتم جای آنها را عوض کنم، بنابراین نحو را بیشتر شبیه به setInterval() تابع:

setInterval(func, delay);

times(func, n);

همچنین، شما آن را صدا کنید setTimes() بجای times() برای مطابقت با setInterval() و setTimeout() روش ها بسته به ترجیحات شما

06. `slugify()`

آیا تا به حال نیاز داشته اید که عنوان مقاله های وبلاگ خود را به قالبی «مانند URL» تبدیل کنید؟

JS Utility Functions => js-utility-functions

در اینجا یک تابع کاربردی کوچک وجود دارد که این کار را انجام می دهد:

const slugify = (string, separator = "-") => {
  return string
    .toString() // Cast to string (optional)
    .toLowerCase() // Convert the string to lowercase letters
    .trim() // Remove whitespace from both sides of a string (optional)
    .replace(/\s+/g, separator) // Replace spaces with -
    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
    .replace(/\_/g, separator) // Replace _ with -
    .replace(/\-\-+/g, separator) // Replace multiple - with single -
    .replace(/\-$/g, ""); // Remove trailing -
};

slugify("Hello, World!");
// Expected output: "hello-world"

slugify("Hello, Universe!", "_");
// Expected output: "hello_universe"

توضیح: این بحث توسط انجمن GitHub است

07. `validateEmail()`

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

const validateEmail = (email) => {
  const regex = /^\S+@\S+\.\S+$/;
  return regex.test(email);
};

validateEmail("youremail@org.com"); // true
validateEmail("youremail@com"); // false
validateEmail("youremail.org@com"); // false

توضیح: در اینجا می توانید با regex بازی کنید.

• RegExp.test() اگر عبارت regex ارائه شده با رشته مطابقت داشته باشد جستجو می کند

توجه داشته باشید: برای پروژه‌های بزرگ‌تر، توصیه می‌کنم از کتابخانه‌هایی مانند validator.js برای انجام کارهای سنگین استفاده کنید.

08. `capitalize()`

ما ساخته شده است toUpperCase() و toLowerCase() روش ها در جاوا اسکریپت با این حال، ما پشتیبانی داخلی برای حروف بزرگ نداریم. بنابراین، بیایید یکی بسازیم!

const capitalize = (str) => {
  const arr = str.trim().toLowerCase().split(" ");

  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }

  return arr.join(" ");
};

capitalize("hello, world!");
// Expected output: "Hello, World!"

توضیح:

• split() – رشته را به آرایه تبدیل می کند
• arr[i].charAt(0).toUpperCase() – حروف بزرگ 1 حرف هر کلمه
• arr[i].slice(1) – حروف کلمه باقی مانده را برمی گرداند.
• arr.join(" ") – آرایه را دوباره به رشته تبدیل می کند

09. `sanitizeHTML()`

آیا تا به حال در مورد حملات Cross-site scripting (XSS) شنیده اید؟ اگر نه، این یک نوع حمله است که در اکثر وب سایت ها رخ می دهد. به عنوان مثال، هنگام ارسال فرم، یک مهاجم ممکن است سعی کند اسکریپت های مخرب را برای نفوذ به سیستم ارسال کند. برای جلوگیری از این اتفاق در فرم‌های شما، می‌توانید از این تابع مفید استفاده کنید که کد اسکریپت را “ضدعفونی” می‌کند.

const sanitizeHTML = (str) => {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
};

sanitizeHTML("<h1>Hello, World!</h1>");
// Expected output: "&lt;h1&gt;Hello, World!&lt;/h1&gt;"

توضیح: بر خلاف innerHTML، textContent در حالی که رشته را به عنوان HTML تجزیه نمی کند innerText فقط عناصر “قابل خواندن برای انسان” را نشان می دهد.

علاوه بر این، با استفاده از textContent می تواند از حملات XSS جلوگیری کند. – اسناد MDN

10. “LocalStorage”.

شاید استفاده کرده باشید localStorage در برنامه های لیست کارها یا هر پروژه دیگری برای ذخیره داده های خاص در حافظه رایانه کاربر. هنگام دریافت و تنظیم موارد، باید از JSON استفاده کنید parse() و stringify() روش هایی برای رسیدن به نتیجه مطلوب بنابراین، اجازه دهید کار با آنها را آسان تر کنیم.

const storage = {
  get: (key, defaultValue = null) => {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : defaultValue;
  },
  set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
  remove: (key) => localStorage.removeItem(key),
  clear: () => localStorage.clear(),
};

storage.set("motto", "Eat, Sleep, Code, Repeat");
storage.get("motto");

توضیح: اگر از JSON اطلاعی ندارید parse() و stringify() روش‌ها، برای توضیح بهتر اسناد MDN را بررسی کنید.

توجه: برای من خیلی سخت بود که یک نام خوب به دست بیاورم که خیلی بیشتر از صرفا منطقی باشد storage. از آنجا که در نگاه اول، توسعه دهندگان ممکن است ندانند که آیا به “LocalStorage” اشاره دارد یا چیز دیگری. با این حال، شما می توانید آن را هر چه که می خواهید نام گذاری کنید. همچنین، اگر نام خوبی پیدا کردید، لطفاً در بخش نظرات به من اطلاع دهید.

منابع

نتیجه

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

با تشکر برای خواندن! 🙂

🔝 بازگشت به بالا