整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文为大家介绍三种 js 截取字符串的方法：
方法1：substring() 方法
string.substring(from, to) 方法从 from 位置截取到 to 位置，to 可选，没有设置时默认到末尾。
<!DOCTYPE html> <html> <body> <script> var str="www.runoob.com!"; document.write(str.substring(4)+"<br>"); // 从第 5 个字符开始截取到末尾 document.write(str.substring(4,10)); // 从第 5 个字符开始截取到第10个字符 </script> </body> </html>
尝试一下 »
更多关于substr() 方法请参考文档：http://www.runoob.com/jsref/jsref-substring.html。
方法2：substr() 方法
substr() 方法可在字符串中截取从开始下标开始的指定数目的字符。
<!DOCTYPE html> <html> <body> <script> var str="www.runoob.com!"; document.write(str.substr(4,6)); // 从第 4 个字符开始截取6个字符 </script> </body> </html>
方法3：slice() 方法
slice(start,end) 方法用于提取字符串的某个部分（从参数 start 到 end 位置），并以新的字符串返回被提取的部分。类似 substring()。
opyClip mac版是Macos上一款高效的剪切板历史管理软件，它能够存储您以前复制或剪切的所有内容，能够使您快速的找到您在寻找的文本片段，为您节省了很多时间提高效率。下载地址：https://www.macv.com/mac/828.html
Macv.com
下载完成后，双击.pkg文件打开，根据安装器提示进行安装即可。
Macv.com
搜索功能
最近剪辑列表
历史记录
提高工作效率
Macv.com
时前端开发工作时，经常会需要对字符串进行截断，比如新闻标题，需要把超出可视区域后需要进行截断，如下图：
小编我由主要负责后端开发，最开始是采用后端方法来实现字符串截断，然后传递给前端人员使用。
但是这个方式有一个弊端，尤其是响应式的页面，截取字数无法精确控制，比如pc端可视区域可以显示150个字符，但是手机端屏幕最多只能显示20个字符，所以通过后端来控制字符数是非常烂的解决方案，最好的解决办法是通过前端方式来截断字符串，下面分别用javascript和css的方式来实现。
先看一下html部分
<div class="title"> 为什么要制作高端的网站？高端网站建设价格为什么越来越高？ </div>
下面分别针对这行html进行截断操作。
先封装一个截取字符串的方法，代码如下：
<script>
String.prototype.left = function (len) //左边截取字段数
{
var str = this;
if (isNaN(len) || len == null) {
len = str.length;
}
else {
if (parseInt(len) < 0 || parseInt(len) > str.length) {
len = str.length;
}
}
return str.substr(0, len);
}
</script>
然后再页面中采用jquery方式调用：
<script type="text/javascript">
$(function () {
var $title=(".title");
var txt= $title.html().left(50); //截取前50个字符
$title.html(txt); //重新
});
</script>
这种方式可以实现字符串的截取，但是这种方法也不理想，pc端和手机端截取字数还是需要单独根据浏览器类型来定义。
定义一个css类：
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow: ellipsis; 这句意思是超出可视区域后显示三个点...，如果只想截断，可以改为： text-overflow:clip。
今天先写到这里，如果感觉对您有帮助，可以转发一下，后续有时间再分享一下前端技巧给大家。
*请认真填写需求信息，我们会在24小时内与您取得联系。
