字符串的各种验证小结 | 8月更文挑战

这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战

一、解析链接参数

例如：有时候要获取链接上的所有参数

//链接地址：https://nj666.com/index.html?code=123&state=1
function getUrlParamsList(url) {
	const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将?后⾯的字符串取出来
	const paramsArr = paramsStr.split('&'); // 将字符串用&符分割后存到数组中
	let paramsObj = {};
	//把params存到对象中
	paramsArr.forEach(param => {
		if (/=/.test(param)) {
			let [key, val] = param.split('='); // 分割key和value
			val = decodeURIComponent(val); // 字符串解码
			val = /^\d+$/.test(val) ? parseFloat(val) : val; //判断是否要转换城数字
			if (paramsObj.hasOwnProperty(key)) { //判断是否有值
				paramsObj[key] = [].concat(paramsObj[key], val);
			} else { // 如果对象没有这个key,创建key并设置值
				paramsObj[key] = val;
			} 
		} else { // 处理没有 value 的参数
			paramsObj[param] = true;
		}
	})
	return paramsObj;
}
let strUrl = "https://nj666.com/index.html?code=123&state=1";
getUrlParamsList(strUrl); //得到{code: 123, state: 1}

1、先通过正则表达式获取链接参数中的?号后面所有的字符串

2、用字符串分割的办法把刚刚拿到的字符串通过&分割

3、因为跳转链接可能会被转码，所以需要解码，再进行判断是否有值。

4、组合再一个paramsObj对象中，返回对象

二、实现模板引擎

如果数据量比较大，就要一直做字符串拼接，用+号就很麻烦，所以需要用到模板引擎，匹配对象后再返回匹配完的字符串。平时用到的框架中也有很多是自带的，例如layui就有，普通的jq项目就可以直接用。

let template = '大家好，我的名字是{{name}}，我今年{{age}}岁，我的工作是{{work}}';
let data = {
	name: '小鲸鱼',
	age: 18,
	work: '程序员'
}
render(template, data); // 我是姓名，年龄18，性别undefined
function render(template, data) {
	const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
	if (reg.test(template)) { // 判断模板⾥是否有模板字符串
		const name = reg.exec(template)[1]; //查找并匹配模板第⼀个模板字符串的字段
		template = template.replace(reg, data[name]); //替换匹配的字符
		return render(template, data); // 递归的渲染并返回渲染后的结构
	}
	return template; // 如果模板没有模板字符串直接返回
}

1、通过判断模板中“{{}}”符号获取变量名

2、再把数据对象中对应的字段匹配，替换字符。

3、返回渲染，并递归继续渲染，直到没有匹配为止。

三、转化驼峰命名

var str = "get-user-info"
// 转化城getUserInfo
var f = function(s) {
	return s.replace(/-\w/g, function(x) {
		return x.slice(1).toUpperCase();
	})
}
console.log(str);//getUserInfo

通过获取“-”后面第一个字符转换为大写，使用toUpperCase()，转为大写实现驼峰式命名的方式，也可以转化为小写，把toUpperCase转为toLowerCase()，就可以了。

四、实现千位分隔符

// 保留三位⼩数
parseQianWei(9998.66); // return '9,998.66'
parseQianWei(123456789); // return '123,456,789'
parseQianWei(1087654.321); // return '1,087,654.321'

function parseQianWei(num) {
	num = parseFloat(num.toFixed(3));
	let [integer, decimal] = String.prototype.split.call(num, '.');
	integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,');
	return integer + '.' + (decimal ? decimal : '');
}

1、保留三位小数

2、分隔小数点之前的数值

3、通过正则表达式使用前向声明和反向声明实现匹配并替换三位数字前加上逗号

六、判断邮箱格式是否正确

function isEmail(email) {
	var regx = /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/;
	return regx.test(email);
}

通过正则表达式来判断是否是邮箱，主要通过判断是否有@符号和‘.’来判断格式是否正确。

七、判断是否有空格

<input type='text' id='userName' />

if($('#userName').trim() == ''){};
if($('#userName').indexOf(' ') != -1){};

一般我们通过。trim来判断前后是否有空格

但是有时候也需要判断中间也是否有空格，就需要用到indexOf或者通过正则表达式也可以，这个比较简单。