函数式编程这样用，效率提高十倍！！

站长

2023年03月16日 21:20 · 阅读数 19

嘿！👋

今天，我们将介绍 5 个 JavaScript 自定义的实用函数，它们可以在您的大多数项目中派上用场。

01.`slugify()`

你是否遇见过要把一段文字的空格转换成-或者.的需求？这种格式转换往往都很常见。转换的过程也需要用到很多的函数。

JS Utility Functions => js-utility-functions

那我们能不能把这种格式的转换封装成一种通用的函数呢？

当我们需要格式转换时只需要往函数里面传入我们需要转换的内容和代替空格的符号，就可以拿到我们的结果了

那要怎么进行封装呢？我们可以看看下面的封装函数

// 根据需求确定  .replace(/-$/g, ""); // 删除尾随 -
// 根据需求确定  .toLowerCase() // 将字符串转换为小写字母

const slugify = (string, separator = "-") => {
  return string
    .toString() // 转换为字符串(可选)
    .trim() // 删除字符串两侧的空格（可选）
    .replace(/\s+/g, separator) // 将空格替换为 -
    .replace(/[^\w-]+/g, "") // 删除所有非单词字符
    .replace(/_/g, separator) // 将 _ 替换为 -
    .replace(/--+/g, separator) // 将多个 - 替换为单个 -

};

slugify("Hello, World!");
// 输出: "Hello-World"

slugify("Hello, Universe!", "_");
// 输出: "Hello_Universe"

说明：这里是GitHub社区的讨论

02. `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

说明：你可以在此处使用正则表达式。

RegExp.test()搜索提供的正则表达式是否与字符串匹配的功能

注意： 对于较大的项目，我建议使用像validator.js这样的库来为你处理繁重的工作。

03. `capitalize()`

在 JavaScript 中有内置的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!");
// 输出: "Hello, World!"

解释：

split()- 将字符串转换为数组
arr[i].charAt(0).toUpperCase()- 大写每个单词的第一个字母
arr[i].slice(1)- 返回剩余的单词字母。
arr.join(" ")- 将数组变回字符串
str.trim()清除字符串的两端空格

04.`sanitizeHTML()`

大家应该都知道跨站点脚本 (XSS) 攻击吧？，这是一种在大多数网站上都会发生的攻击。例如，当提交表单时，攻击者可能会尝试发送恶意脚本来侵入系统。为了防止这种情况发生在你的网站表单上，您可以使用下面这个方便的功能来“清理”脚本代码。

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

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

说明：与 innerHTML，textContent不同的是,函数不会将字符串解析为 HTML，而是把innerText变为仅显示“元素内容”的元素。

而且，使用textContent可以防止XSS攻击。- MDN 文档

05. `localStorage`

我们经常会使用localStorage来将特定数据保存在用户的计算机内存中。但是在获取和设置本地缓存时，你必须使用 JSONparse()和stringify()方法来是数据符合localStorage的规则。那我们能不能封装一个函数让我们更轻松地使用localStorage呢？。

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");

说明：如果您不了解 JSONparse()和stringify()方法，请查看MDN 文档以获得更好的说明。

注意：我很难想出一个比 . 更有意义的好名字storage。因为乍一看，开发人员可能不知道它指的是“localStorage”还是其他东西。但是，您可以随意命名。此外，如果您发现任何好名字，可以在评论部分告诉我。

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

函数式编程这样用，效率提高十倍！！

目录

01.slugify()

02. validateEmail()

03. capitalize()