JS实现一段字符串转换成5个字符为一组的数组

今天遇到一个新的需求，展示一段字符串，一行展示5个字，不足5个字的则全部展示。由于字符串时后端直接返回的，长度内容不确定，所以考虑着将这一段字符串转换成有顺序的数组，5个字符为一组。

方法一

	let str = '长江后-浪推前浪啦啦啦啦啦拉了拉',
    	arr = []//用于保存每次截取后的字符串
    function creatArr(str) {
      var len = str.length
      let newStr = ''//截取之后返回的新字符串

      if (len > 5) {
        newStr = str.substr(0, 5)
        arr.push(newStr)
        str = str.replace(newStr, '')
        creatArr(str)
      } else {
        arr.push(str)
      }
      return arr
    }

    let res = creatArr(str)
    console.log(res)
	//["长江后-浪", "推前浪啦啦", "啦啦啦拉了", "拉"]

方法二

	let str = '长江后-浪推前浪啦啦啦啦啦拉了拉',
      start = 0, //首次截取的开始索引，每次截取后递增
    end = 5, //首次截取的结束索引，每次截取后递增
    unit = 5 //5个1组

    function createArr(str, start, end) {
      let arr = [] //保存每次截取后的字符串
      let counts = Math.ceil(str.length / unit) //循环截取的次数,向上取整

      for (let i = 0; i < counts; i++) {
        let newStr = str.substring(start, end)
        arr.push(newStr)
        start = end
        end += 5
      }
      return arr
    }
    let res = createArr(str, start, end)
    console.log(res)
    //["长江后-浪", "推前浪啦啦", "啦啦啦拉了", "拉"]

3 补充

3.1 substr() 方法

语法：stringObject.substr(start,length)

• start：必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
• length：子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值：

一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

提示：

substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

---

3.2 substring()方法

语法：stringObject.substring(beginIndex,endIndex)

• beginIndex：必需。起始索引（包括）, 索引从 0 开始。
• endIndex：可选。结束索引（不包括），如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值：

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从beginIndex 处到endIndex-1 处的所有字符，其长度为 endIndex 减 beginIndex。

说明：

如果参数 beginIndex 与 endIndex 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 beginIndex 比 endIndex 大，那么该方法在提取子串之前会先交换这两个参数。

提示：

与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

---

3.3 slice

定义：

slice() 方法可从已有的数组中返回选定的元素。

语法：stringObject.substring(start,stop)

• start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推
• stop：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素

返回值

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

说明

请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

提示

• 可使用负值从数组的尾部选取元素。
• 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。