极简三分钟ES6 - ES8中字符串扩展

padStart() & padEnd()：字符串填充术

作用：给字符串加「边距」

想象给手机号码排版

// 手机号补位 
"13800138000".padStart(13, "📱") // "📱📱13800138000"
"同意".padEnd(6, "✅")           // "同意✅✅✅✅"
 
// 金额对齐 
"¥99".padStart(8)     // "     ¥99"（默认空格填充）
"¥9999".padEnd(10, "*") // "¥9999*****"

trimStart() & trimEnd()：智能空格铲

作用：精准清除首尾「空白垃圾」

对比旧版trim()

// 用户输入清理 
const userInput = "  订单号：A123  ";
console.log(userInput.trim());           // "订单号：A123"（两端全清）
console.log(userInput.trimStart());      // "订单号：A123  "（仅清开头）
console.log(userInput.trimEnd());        // "  订单号：A123"（仅清结尾）

应用场景

• 表单输入：保留用户刻意输入的尾部空格
• 日志处理：清除行首时间戳后的多余空格

一些常见的使用场景

生成表格对齐文本

const products = [
  { name: "手机", price: 5999 },
  { name: "耳机", price: 899 }
];
 
// 生成整齐价目表 
products.forEach(p  => {
  const nameLine = p.name.padEnd(10,  "　"); // 中文全角空格 
  const priceLine = `¥${p.price}`.padStart(8); 
  console.log(` | ${nameLine} | ${priceLine} |`);
});
 
// 输出：
// | 手机　　　　 |     ¥5999 |
// | 耳机　　　　 |      ¥899 |

安全处理用户输入

// 防止SQL注入（清理首尾特殊字符）
const searchTerm = "  ;DROP TABLE users;  "
  .trimStart()
  .trimEnd();
 
console.log(`SELECT  * FROM products WHERE name='${searchTerm}'`);
// 输出：SELECT * FROM products WHERE name=';DROP TABLE users;'

生成固定格式ID

// 订单号补零至10位
const genOrderId = (id) => id.toString().padStart(10,  "0");
 
console.log(genOrderId(325));  // "0000000325"
console.log(genOrderId(98765));  // "0000098765"

一些特殊情况

填充字符超长时截断

"Hi".padEnd(10, "ABCDE") // "HiABCDEAB"（重复填充至10字符）

原字符串更长时直接返回

"HelloWorld".padStart(5, "*") // "HelloWorld"（忽略填充）

处理Emoji和双字节字符

"🐱".padEnd(3, "❤️") // "🐱❤️❤️"（1个Emoji=2字符长度）
"中文".padStart(5, "X") // "XXX中文"（每个汉字=2字符）

与传统方案对比

需求	ES5方案	ES8方案	优势
字符串开头补零	while(str.length<10) str="0"+str	str.padStart(10,"0")	代码减少80%
清除开头空格	str.replace(/^\s+/, "")	str.trimStart()	无需理解正则
格式化文本对齐	手动计算空格数量	padEnd+固定长度	自适应不同内容长度

牢记

"pad补位如排版，trim清空首尾端，字符串操作用ES8，简洁高效不绕弯！"