十五、字符串新方法

ES6 为字符串添加了一些新的方法，使字符串操作更加方便和高效。

includes() 判断是否包含

includes() 方法判断字符串是否包含指定的子字符串，返回布尔值。

const str = 'Hello, World!';

console.log(str.includes('Hello')); // true
console.log(str.includes('World')); // true
console.log(str.includes('hello')); // false（区分大小写）
console.log(str.includes('Hello', 1)); // false（从索引 1 开始搜索）

实战：检查字符串包含关系

function checkIncludes(text, keyword) {
  if (text.includes(keyword)) {
    console.log(`"${text}" 包含 "${keyword}"`);
  } else {
    console.log(`"${text}" 不包含 "${keyword}"`);
  }
}

checkIncludes('JavaScript is awesome', 'JavaScript'); // "JavaScript is awesome" 包含 "JavaScript"
checkIncludes('JavaScript is awesome', 'Python'); // "JavaScript is awesome" 不包含 "Python"

startsWith() / endsWith()

startsWith()

startsWith() 方法判断字符串是否以指定的子字符串开头，返回布尔值。

const str = 'Hello, World!';

console.log(str.startsWith('Hello')); // true
console.log(str.startsWith('World')); // false
console.log(str.startsWith('Hello, W')); // true
console.log(str.startsWith('Hello', 1)); // false（从索引 1 开始检查）

endsWith()

endsWith() 方法判断字符串是否以指定的子字符串结尾，返回布尔值。

const str = 'Hello, World!';

console.log(str.endsWith('World!')); // true
console.log(str.endsWith('Hello')); // false
console.log(str.endsWith('!')); // true
console.log(str.endsWith('World', 11)); // true（只检查前 11 个字符）

实战：文件扩展名判断

function getFileType(filename) {
  if (filename.endsWith('.txt')) {
    return '文本文件';
  } else if (filename.endsWith('.js')) {
    return 'JavaScript 文件';
  } else if (filename.endsWith('.html')) {
    return 'HTML 文件';
  } else if (filename.endsWith('.css')) {
    return 'CSS 文件';
  } else {
    return '未知文件类型';
  }
}

console.log(getFileType('index.html')); // HTML 文件
console.log(getFileType('script.js')); // JavaScript 文件
console.log(getFileType('style.css')); // CSS 文件
console.log(getFileType('document.txt')); // 文本文件
console.log(getFileType('image.jpg')); // 未知文件类型

repeat() 重复

repeat() 方法返回一个新字符串，表示将原字符串重复指定次数。

const str = 'Hello';

console.log(str.repeat(3)); // HelloHelloHello
console.log(str.repeat(0)); // 空字符串
console.log(str.repeat(1)); // Hello
console.log('*'.repeat(10)); // **********

实战：生成分隔线

function generateSeparator(length = 20, char = '-') {
  return char.repeat(length);
}

console.log(generateSeparator()); // --------------------
console.log(generateSeparator(30, '=')); // ==============================
console.log(generateSeparator(10, '*')); // **********

padStart() / padEnd() 补全

padStart()

padStart() 方法用指定的字符串在开头补全原字符串，直到达到指定长度。

const str = '123';

console.log(str.padStart(5, '0')); // 00123
console.log(str.padStart(10, 'ab')); // ababab123
console.log(str.padStart(2)); // 123（长度小于原字符串，返回原字符串）

padEnd()

padEnd() 方法用指定的字符串在结尾补全原字符串，直到达到指定长度。

const str = '123';

console.log(str.padEnd(5, '0')); // 12300
console.log(str.padEnd(10, 'ab')); // 123abababa
console.log(str.padEnd(2)); // 123（长度小于原字符串，返回原字符串）

实战：格式化数字

function formatNumber(num, length = 6) {
  return num.toString().padStart(length, '0');
}

console.log(formatNumber(123)); // 000123
console.log(formatNumber(4567)); // 004567
console.log(formatNumber(789012)); // 789012

字符串新方法的优势

1. 代码简洁：相比传统的字符串操作方法，新方法更加简洁易读
2. 功能强大：提供了更多实用的字符串操作功能
3. 性能优化：一些新方法在性能上比传统方法更优
4. 语义清晰：方法名直观表达了其功能

通过本章节的学习，你已经掌握了 ES6 中字符串的新方法。这些方法可以使字符串操作更加方便和高效，提高开发效率。