JavaScript中substring与substringData的区别是什么？

1. 调用对象完全不同 #

• substring 是JavaScript 标准字符串(String)对象的内置方法，仅可对普通字符串类型的变量调用。
  示例代码：

  const baseStr = "frontend development"
  // 参数为(起始索引, 结束索引[可选])，结束索引对应字符不包含在返回结果中
  const result = baseStr.substring(0, 8) 
  // 返回结果为 "frontend"
  

• substringData 是DOM CharacterData 接口的内置方法，仅可对继承了该接口的DOM节点调用，最常见的是文本节点(Text)、注释节点(Comment)，不能直接对普通字符串调用。
  示例代码：

  // 创建一个DOM文本节点
  const textNode = document.createTextNode("frontend development")
  // 参数为(起始偏移量, 截取长度[必填])
  const result = textNode.substringData(0, 8)
  // 返回结果同样为 "frontend"
  

2. 核心参数规则差异 #

• substring(start, end?)：第二个参数为结束索引，可选，不传则默认截取到字符串末尾；如果start > end，方法会自动交换两个参数再执行
• substringData(offset, count)：第二个参数为要截取的字符长度，必填，缺省会抛出语法错误；不支持自动交换参数，offset大于节点内容长度时会返回空字符串

3. 适用场景选择 #

• 日常处理普通字符串变量、无DOM操作需求时，直接使用substring即可，这是通用的字符串截取方案。
• 仅在需要直接操作DOM文本/注释节点的部分内容、做底层DOM处理时，才需要用到substringData，日常业务开发中使用频率极低。

内容的提问来源于stack exchange，提问作者Mushfik F Rahman