专栏首页grain先森前端-js截取字符串

前端-js截取字符串

Hi,大家好,我是你们的grain先森,好久没有分享自己的文章啦!甚是想念你们!

今天我要跟大家分享的是js截取字符串。遇到这样的问题,大家可能选择直接百度,但是百度到的方法,有些却不尽你意,小编也是遇坑之后,想想还是自力更生吧,现在整理出来分享给大家。

话不多说啦,就是上干货。

一、需求场景

大家在平时的开发中,肯定会遇到“某些字符超过多少字截断,并显示...”的需求,特别是在移动端,碍于屏幕尺寸的限制,某些“昵称”,“备注”等等字段,经常会让截断,后面跟着仨点。

1、纯汉字或纯英文字符串

直接用slice、substr、substring、splice等方法就可以直接按照需求截断,这里不做解释啦,当然我下面介绍的方法也可以实现。

2、中英文组合、表情的字符串

这才是咱们今天的主角

二、代码片段

     /**	* @获取字符串字节长度	* @param {String} str	* @returns	*/	function getStrLen (str) {		let len = 0;		for (let i = 0; i < str.length; i++) {			let currLen = str.charCodeAt(i);			if (currLen >= 0 && currLen <= 128) {				len += 1;			} else {				len += 2;			}		}		return len;	}

     /**	* @截取指定长度的字符串,超出部分显示指定字符	* @param {*} name	* @param {number} [len=8]	* @param {string} [endStr="..."]	* @returns	*/	function cutOffStr (name, len = 8, endStr = "...") {		// 小于等于指定长度		if (getByteLen(name) <= len) return name;				// 超出指定长度		let formatName = '';		let strLen = 0;		for (let i = 0; i < name.length; i++) {			strLen += getByteLen(name[i]);			if (strLen <= len) {				formatName += name[i];			} else {				break;			}		}		return formatName + endStr;	}

三、代码分析

首先,我要知道当前的字符串有多少个字节(不知道位、字节、字符、字符串的可以自行百度);

其次,通过charCodeAt()方法获取某个字符的Unicode编码(后面有解释)。本方法中ASCII小于等于128的算一个字节,大于128的则算作两个字节,也即,一个英文字符、数字等算一个字节,一个汉字、表情等算两个字节。这样可以知道一个字符串的长度;

接着,截断字符串,先判断字符串长度是否小于等于指定长度,是,则直接原样返回,否则,继续下一步;

最后,要实现按指定长度截断,就必须对每个字符进行判断是几个字节,对未超出指定长度的字符进行累加,直至超出指定长度,循环终止,返回截断后的字符串,达到需求。

:charCodeAt()方法可返回指定位置的字符的 Unicode 编码,这个返回值是 0 - 65535 之间的整数。开头的128个Unicode编码单元和ASCII字符编码一样。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css3 Animation 动画原则六

    对象很少从静止状态一下子加速到最大速度,它们往往是逐步加速并在停止前变慢。没有加速和减速,动画感觉就像机器人。

    grain先森
  • 压箱底的正则实例

    密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

    grain先森
  • 原生JS实现移动端滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下:

    grain先森
  • Java之字符流读写文件、文件的拷贝

    爱学习的孙小白
  • 大数据项目之_15_电信客服分析平台_学习总结

    黑泽君
  • 原生ES-Module在浏览器中的尝试

    首先在使用上,唯一的区别就是需要在script标签上添加一个type="module"的属性来表示这个文件是作为module的方式来运行的。

    贾顺名
  • 「黑科技」3D打印的脑子和正常的脑子哪个脑洞大?

    镁客网
  • Java的字节码和ABAP load的比较

    I use this small blog to help my new colleagues on board who have Java programmi...

    Jerry Wang
  • SAP CRM 中间件Request download里,遇到/SAPPSPRO/S_MAT_ENHANC_COMM 错误的解决办法

    SAP CRM 中间件Request download里,遇到/SAPPSPRO/S_MAT_ENHANC_COMM 错误的解决办法

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券