JavaScript之填充字符串五种方法

点击跳转填充数组方法

在 JS开发中，填充字符串是一个常见的操作，用于在字符串的开头或结尾添加特定字符，使其达到所需的长度。本文将介绍几种实现字符串填充的方法，包括内置方法和一些手动实现的方式。

1. 使用 padStart()

String.prototype.padStart() 方法用于在当前字符串的开头填充指定的字符，直到字符串达到给定的长度。这个方法非常适用于格式化数字或在字符串前添加填充字符。

str.padStart(targetLength, padString)
语法

• targetLength：目标长度，填充后的字符串长度。
• padString：用于填充的字符串（默认为空格）。

示例

const str = '5';
const padded = str.padStart(2, '0'); // 输出 '05'
console.log(padded);

2. 使用 padEnd()

String.prototype.padEnd() 方法用于在当前字符串的结尾填充指定的字符，直到字符串达到给定的长度。这个方法对于需要在字符串后添加字符的情况非常有用
语法

str.padEnd(targetLength, padString)

• targetLength：目标长度，填充后的字符串长度。
• padString：用于填充的字符串（默认为空格）

示例

const str = '5';
const padded = str.padEnd(2, '0'); // 输出 '50'
console.log(padded);

3. 手动填充字符串

在 padStart() 和 padEnd() 方法出现之前，开发者常常使用字符串拼接来实现填充。这种方法虽然简单，但在处理复杂填充时可能不够灵活。
示例

const str = '5';
const paddedStart = '0' + str; // 输出 '05'
const paddedEnd = str + '0'; // 输出 '50'
console.log(paddedStart, paddedEnd);

4. 使用 repeat() 方法与切片

ES6 的 String.prototype.repeat() 方法可以用来创建重复的字符串，通过与 slice() 结合使用，可以实现灵活的填充效果。
语法

'char'.repeat(count)

• char是指定的字符串
• count是指定的字符串的副本数量
  示例

const str = '5';
const padded = ('0'.repeat(2) + str).slice(-2); // 输出 '05'
console.log(padded);

5.使用模板字符串

模板字符串（模板字面量）可以使填充操作更具可读性和灵活性，特别是在处理复杂的填充逻辑时。

示例

const str = '5';
const padded = `${'0'.repeat(2 - str.length)}${str}`; // 输出 '05'
console.log(padded);