JS截取字符串的方法

言

JavaScript 是现代 Web 开发的核心技术之一，它让网页变得生动且具有交互性。字符串操作是前端开发中最常见的任务之一，特别是在处理用户输入、解析数据或者生成动态内容时。本文旨在探讨 JavaScript 中用于截取字符串的多种方法，并通过实例来比较它们的特点和适用场景。

技术概述

定义与特性

截取字符串是指从给定的字符串中提取出部分字符。JavaScript 提供了多种内置方法来进行这种操作，例如 substring(), slice(), substr(), charAt(), 以及正则表达式等。此外，还有第三方库提供的扩展功能。

核心特性与优势

易用性: 大多数截取方法都非常直观且易于使用。
灵活性: 不同方法提供了不同的参数选项，可以根据需求选择最合适的一种。
兼容性: 这些方法在所有现代浏览器中都得到了很好的支持。

示例代码

let str = "Hello, world!";
console.log(str.substring(7, 12)); // "world"
console.log(str.slice(7, 12));    // "world"
console.log(str.substr(7, 5));    // "world"
console.log(str.charAt(7));       // "w"

技术细节

每种方法在实现上各有特点：

substring(start, end): 返回从 start 到 end - 1 的子串。如果 start 大于 end，会自动交换这两个值。
slice(start, end): 类似 substring()，但可以处理负数索引。
substr(start, length): 从 start 索引开始返回指定长度的子串。
charAt(index): 返回指定索引处的一个字符。
split() 和 join(): 可以通过先分割字符串再重组的方式实现截取。
正则表达式: 利用匹配模式来截取字符串。

实战应用

假设我们需要从一个包含日期的字符串中提取月份：

function extractMonth(dateStr) {
  const parts = dateStr.split('-');
  return parts[1];
}

const dateString = "2023-07-25";
console.log(extractMonth(dateString)); // "07"

在这个例子中，我们使用 split() 方法来分割字符串，然后选取第二部分（即月份）。

优化与改进

问题1: Unicode 字符支持

在处理包含多字节 Unicode 字符的字符串时，某些方法（如 substr()）可能会产生错误的结果。解决方法是使用 slice() 或第三方库提供的方法。

代码示例

function unicodeSlice(str, start, end) {
  return [...str].slice(start, end).join('');
}

const unicodeStr = "こんにちは";
console.log(unicodeSlice(unicodeStr, 0, 2)); // "こん"

问题2: 性能考虑

当处理大量数据时，频繁使用字符串方法可能会成为性能瓶颈。解决方法是尽量减少字符串操作，或者使用更高效的算法。

代码示例

function optimizeStringOperations(str, pattern) {
  const regex = new RegExp(pattern, 'g');
  return str.replace(regex, '');
}

const longStr = "abcde".repeat(10000);
console.log(optimizeStringOperations(longStr, 'b')); // "acdeacde...acde"

常见问题

问题1: 如何正确处理负数索引？

slice() 方法支持负数索引，而 substring() 和 substr() 不支持。

问题2: 如何截取特定字符之后的内容？

可以使用正则表达式结合 match() 或 replace() 方法。

代码示例

function cutAfter(str, char) {
  return str.split(char).pop();
}

const str = "http://example.com/path/to/resource";
console.log(cutAfter(str, '/')); // "to/resource"

总结与展望

通过本文的学习，我们不仅了解了如何有效地截取字符串，还了解了不同方法背后的原理及其适用场景。随着ES6及更高版本标准的引入，新的字符串处理方法和工具也在不断出现，这将为我们提供更多的选择和更高的效率。

字符串操作是前端开发中的重要组成部分，掌握这些技巧不仅能提高我们的编码效率，还能增强代码的健壮性和可维护性。未来，我们可以期待更多高效的字符串处理工具和技术的发展。

总之，选择合适的方法取决于具体的应用场景和个人偏好。希望这篇文章能够帮助你在实际工作中更加熟练地使用这些方法。

时前端开发工作时，经常会需要对字符串进行截断，比如新闻标题，需要把超出可视区域后需要进行截断，如下图：

小编我由主要负责后端开发，最开始是采用后端方法来实现字符串截断，然后传递给前端人员使用。

但是这个方式有一个弊端，尤其是响应式的页面，截取字数无法精确控制，比如pc端可视区域可以显示150个字符，但是手机端屏幕最多只能显示20个字符，所以通过后端来控制字符数是非常烂的解决方案，最好的解决办法是通过前端方式来截断字符串，下面分别用javascript和css的方式来实现。

先看一下html部分

<div class="title">
为什么要制作高端的网站？高端网站建设价格为什么越来越高？
</div>

下面分别针对这行html进行截断操作。

1、javascript方式。

先封装一个截取字符串的方法，代码如下：

<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端和手机端截取字数还是需要单独根据浏览器类型来定义。

2、css控制，这个是最推荐的解决方案

定义一个css类：

.title {
 white-space: nowrap;
 text-overflow: ellipsis; 
 overflow: hidden;
}

text-overflow: ellipsis; 这句意思是超出可视区域后显示三个点...，如果只想截断，可以改为： text-overflow:clip。

今天先写到这里，如果感觉对您有帮助，可以转发一下，后续有时间再分享一下前端技巧给大家。

<html>
<head>
<meta charset="UTF-8">
<title>用 css 实现字符串截断</title>
<style>
div {
    width: 300px;
    overflow: hidden;
    /*规定当内容溢出元素框时发生的事情*/
    white-space: nowrap;
    /*设置如何处理元素内的空白。规定在文本中不进行换行*/
    text-overflow: ellipsis;
    /*规定当文本溢出包含元素时发生的事情*/
}

div:hover{
    cursor:pointer;
}
div:hover:before{
    content:attr(title);
    background:#d9444a;
    color:#fff;
    padding:.8em 1em;
    position:absolute;
    left:100%;
    top:-70%;
    margin-left:14px;
    white-spack:pre;
}
div:hover:after{
    content:" ";
    position:absolute;
    left:80%;
    width:0;
    height:0;
    border-right:8px solid #d9444a;
    border-top:8px solid transpatrnt;
    border-bottom:8px solid transparent;
}
</style>
</head>
<body>
<div title="轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！">轻轻松松制作div+css截取字符段在规定长度，超出部分用...代替！</div>
</body>
</html>

在线咨询

上一篇：几张图为你分析HTML、JS与PHP之间的数据传输
下一篇：CSS样式更改-字体设置Font&边框Border

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS截取字符串的方法

言

技术概述

定义与特性

核心特性与优势

示例代码

技术细节

实战应用

优化与改进

问题1: Unicode 字符支持

代码示例

问题2: 性能考虑

代码示例

常见问题

问题1: 如何正确处理负数索引？

问题2: 如何截取特定字符之后的内容？

代码示例

总结与展望

1、javascript方式。

2、css控制，这个是最推荐的解决方案

您的项目需求