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

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

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

想象给手机号码排版

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

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

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

对比旧版trim()

js 复制代码
// 用户输入清理 
const userInput = "  订单号:A123  ";
console.log(userInput.trim());           // "订单号:A123"(两端全清)
console.log(userInput.trimStart());      // "订单号:A123  "(仅清开头)
console.log(userInput.trimEnd());        // "  订单号:A123"(仅清结尾)

应用场景

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

一些常见的使用场景

生成表格对齐文本

js 复制代码
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 |

安全处理用户输入

js 复制代码
// 防止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

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

一些特殊情况

填充字符超长时截断

js 复制代码
"Hi".padEnd(10, "ABCDE") // "HiABCDEAB"(重复填充至10字符)

原字符串更长时直接返回

js 复制代码
"HelloWorld".padStart(5, "*") // "HelloWorld"(忽略填充)

处理Emoji和双字节字符

js 复制代码
"🐱".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,简洁高效不绕弯!"

相关推荐
namekong811 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天12 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄14 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10115 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194315 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧16 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台16 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10016 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc17 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅18 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学