当前位置：首页 > article >正文

前端开发中的常用工具函数解析与应用

article 2025/1/1 20:19:12

前端开发常用工具函数解析

在前端开发中，常常需要对输入的内容或参数进行各种验证与判断，以确保数据的有效性和安全性。本文将对一些常用的工具函数进行解析，帮助大家更好地理解和使用这些方法。

1. 判断URL是否是`http`或`https`

/**
 * 判断url是否是http或https 
 * @param {string} url
 * @returns {Boolean}
 */
export function isHttp(url) {
  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}

isHttp函数用于判断传入的URL是否以http://或https://开头。这对于验证用户输入的URL是否为合法的网络地址非常有用，尤其是在处理链接、API请求等场景中。

2. 判断路径是否为外链

/**
 * 判断path是否为外链
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

isExternal函数通过正则表达式判断路径是否以http://、https://、mailto:或tel:开头，这意味着该路径是一个外部链接。这个函数通常用于区分内部链接和外部链接，以便做出不同的处理，比如跳转或新窗口打开。

3. 验证用户名是否合法

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

validUsername函数用于验证用户名是否符合规定的标准（例如是否是admin或editor）。该函数主要用于一些具有权限管理的系统，确保只有预设的用户才能登录。

4. 验证URL是否有效

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp)://([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+.)*[a-zA-Z0-9-]+.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(/($|[a-zA-Z0-9.,?'\+&%$#=~_-]+))*$/
  return reg.test(url)
}

validURL函数通过正则表达式验证URL的有效性。它判断URL是否符合http(s)协议，并且符合标准的域名、路径、端口和查询参数等格式。常用于表单验证或后端接口请求时检查传入的URL是否有效。

5. 验证字符串是否为小写字母

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

validLowerCase函数用于验证字符串是否为全小写字母。对于一些需要区分大小写的场景，比如密码验证、用户名格式要求等，这个函数会特别有用。

6. 验证字符串是否为大写字母

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

validUpperCase函数与validLowerCase类似，不过它是用于验证字符串是否为全大写字母。在一些需要验证大写字母的场景下，比如要求密码中包含大写字母时，可以使用此函数。

7. 验证字符串是否为字母

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

validAlphabets函数用于验证字符串是否只包含字母。它支持大小写字母，对于一些只允许字母输入的表单字段，或需要验证姓名、昵称等场景中，都会使用到。

8. 验证Email地址格式

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

validEmail函数用于验证Email地址的格式是否合法。常用于表单中用户注册或修改邮箱时，确保输入的Email地址符合标准格式。

9. 判断输入是否为字符串

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

isString函数用于判断一个值是否为字符串类型。在处理不同类型的数据时，我们常常需要确保某个变量是字符串类型，避免出现类型错误。

10. 判断输入是否为数组

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

isArray函数用于判断输入是否为数组。虽然JavaScript提供了原生的Array.isArray()方法，但为了兼容老旧浏览器（如IE），我们通常需要写一个兼容性的判断。