JavaScript作为一种在Web开发中广泛使用的编程语言，其字符串截取功能也是不可或缺的。截取字符串是指将原字符串中的某一部分提取出来或者将原字符串中的一部分截断，只取其中的一部分内容，比如只取头部或者取中间部分。

在文本内容处理、表单验证、数据处理等方面，字符串截断是非常常见的操作。本篇文章将带您逐步学习JavaScript如何实现字符串截取。

一、JavaScript字符串截取方法

JavaScript字符串截取方法有很多，常见的有以下三种方法：

1.substring()方法

substring()方法是从字符串中截取指定的一段字符串，并返回这个子串。这个方法可以使用两个参数。第一个参数是起始位置，第二个是结束位置。如果只涉及到一个参数，那么该方法将从起始位置截取到结尾。

例如：

```javascript

var str = "HelloWorld!";

// 从位置1开始截取到位置5

var res = str.substring(1, 5);

console.log(res); // 输出："ello"

```

2.substr()方法

substr()方法用于从字符串中截取指定的子串，并返回该子串。该方法也需要两个参数：第一个是子串起始位置，第二个是需要提取的字符数量。

例如：

```javascript

var str = "HelloWorld!";

// 从位置1开始截取截取5个字符

var res = str.substr(1, 5);

console.log(res); // 输出："elloW"

```

3.slice()方法

slice()方法截取从指定位置开始，并结束于另一个指定位置的一个字符串。与substring()方法类似，该方法使用两个参数：第一个参数定义了开始位置，第二个参数则定义了结束位置。

例如：

```javascript

var str = "HelloWorld!";

// 从位置1开始截取到位置5

var res = str.slice(1, 5);

console.log(res); // 输出："ello"

```

二、JavaScript截取指定长度的字符串

使用上述的三种方法可以实现对特定位置字符串的截取，但是如果我们需要截取的是一段长度确定的字符串，该怎么办呢？这时候，我们可以通过在已有截取方法的基础上，增加一些长度的判断来实现截取指定长度的字符串。

1.字符串截取函数封装

我们可以将上述三种方法封装成一个函数，然后再对该函数进行维护和修改。如下所示：

```javascript

/**

* 截取指定长度字符串

* @param {String} str 需要截取的字符串

* @param {Number} len 截断的长度

* @returns {String} 返回截断后的字符串

*/

function cutStr(str, len) {

if (str.length <= len) {

return str;

} else {

return str.slice(0, len) + '...';

}

}

```

这段代码中，如果字符串的长度小于等于截取长度，则直接返回原字符串；否则将原字符串截取指定长度，之后使用“...”符号替代截取掉的部分。

2.使用字符串截取函数

我们可以通过调用上述函数，实现截取指定长度的字符串的目的。

例如：

```javascript

var str = "JavaScript是一种广泛使用的编程语言，也是Web前端开发的重要技术之一";

// 截断10位

var res = cutStr(str, 10);

console.log(res); // 输出："JavaScrip..."

```

三、JavaScript截取中英文混合字符串

如果需要截取的字符串中包含中文和英文混合，我们需要注意一个中文字占用的长度和两个英文字母占用长度的不同。

一般而言，UTF-8编码时，一个汉字占用3个字节，而一个英文字母占用1个字节。所以，在截取中英文混合字符串的时候，计算长度时需要根据不同的字符类型来判断，这需要JS字符串截取函数做特殊的处理。

解决这个问题，我们可以在原来字符串截取的基础上，增加一个字符长度计算函数。

1.获取中英文混合字符串长度

字符串的 length 属性只能获得字符串的长度，而无法区分中英文、数字等字符的类型。因此，这里我们需要对字符串进行特殊处理。

在UTF-8编码中，由于一个中文字符占用3个字节，而一个英文字符只占用1个字节，因此，我们可以采用遍历整个字符串的方式来判断每个字符的长度，累加总和，从而得到该字符串的长度。

如下面的代码所示：

```javascript

/**

* 获取字符串实际长度，中文字符长度为2

* @param {String} str 需要计算长度的字符串

* @returns {Number} 返回长度

*/

function getLength(str) {

var len = str.length;

var realLen = 0;

var charCode = -1;

for (var i = 0; i < len; i++) {

charCode = str.charCodeAt(i);

if (charCode >= 0 && charCode <= 128) {

realLen += 1; // 英文字符按1个字符长度计算

} else {

realLen += 2; // 中文字符按2个字符长度计算

}

}

return realLen;

}

```

2.中英文混合字符串截取函数封装

在上面的基础上，我们可以将该函数进行修改，实现指定长度的中英文混合字符串的截取。如下所示：

```javascript

/**

* 截取指定长度字符串，中英文字符均可

* @param {String} str 需要截取的字符串

* @param {Number} len 需要截取的长度

* @returns {String} 返回截取后的字符串

*/

function subStr(str, len) {

var srcLen = str.length;

var realLen = getLength(str);

if (realLen <= len) {

return str;

} else {

var lenCount = 0;

var sbStr = "";

for (var i = 0; i < srcLen; i++) {

var charCode = str.charCodeAt(i);

if (charCode >= 0 && charCode <= 128) {

lenCount += 1;

} else {

lenCount += 2;

}

if (lenCount <= len) {

sbStr += str.charAt(i);

} else {

return sbStr + "...";

}

}

}

}

```

该函数分为两个部分：

- 新增一个函数getLength()，计算中文和英文的字符串长度。

- 修改函数名为subStr()，完成中英文混合字符串截取指定长度操作。

3.使用中英文混合字符串截取函数

使用该函数，便可实现中英文混合字符串的指定长度截取。

例如：

```javascript

var str1 = "JavaScript是一种广泛使用的编程语言，也是Web前端开发的重要技术之一";

var str2 = "Good Good Study，Day Day Up!";

// 截取8位

console.log(subStr(str1, 8)); // 输出："JavaScri..."

console.log(subStr(str2, 8)); // 输出："Good Goo..."

```

四、总结

JavaScript字符串操作是web前端程序员需要掌握的技能之一，本篇文章介绍了其三种常见的字符串截取方法，以及如何增加字符串长度计算函数和中英文混合字符串的截取函数封装。相信通过本文的学习，您已经掌握了JavaScript字符串截取的方法和技巧，希望对您的web开发工作能够有所帮助。