极简三分钟ES6 - 字符串扩展模板字符串：告别拼接烦恼作用：用反引号 ` 包裹字符串，支持换行和直接嵌入变量/表达式

模板字符串：告别拼接烦恼

作用：用反引号 ` 包裹字符串，支持换行和直接嵌入变量/表达式

// ES5 拼接字符串 
let name = "小明";
console.log(" 你好，" + name + "！今天天气" + (isSunny ? "晴朗" : "多云"));
 
// ES6 模板字符串 
console.log(` 你好，${name}！今天天气${isSunny ? "晴朗" : "多云"}`); 
 
// 支持多行文本（无需\n）
const letter = `
  尊敬的${name}：
      您的订单已发货！
`;

优势：

代码更简洁直观
避免拼接错误
完美支持HTML片段生成

新增查询方法：精准定位字符

includes() → 是否包含子串

"hello".includes("ell"); // true（替代indexOf > -1）

startsWith() → 是否以某字符串开头

"https://xxx.com".startsWith("https"); // true（校验协议）

endsWith() → 是否以某字符串结尾

"file.txt".endsWith(".txt"); // true（校验文件类型）

字符串补全：对齐格式化

padStart(长度, 补全符) → 头部补全

"5".padStart(3, "0"); // "005"（数字补零）

padEnd(长度, 补全符) → 尾部补全

"Hi".padEnd(5, "!"); // "Hi!!!"（生成提示语）

场景：表格对齐、日期格式化、验证码生成

重复与去空格：快捷处理

repeat(n) → 重复n次字符串

"A".repeat(3); // "AAA"（生成分隔线）

trimStart() / trimEnd() → 清除首/尾空格

"  text  ".trimStart(); // "text  "  
"  text  ".trimEnd();   // "  text"

Unicode增强：支持特殊字符

\u{码点} → 直接表示扩展Unicode

"\u{1F604}"; // "😄"（ES5只能写\uD83D\uDE04）

codePointAt() → 获取字符的完整码点

"😄".codePointAt(0); // 128516（正确识别四字节字符）

遍历接口：`for...of`直接操作字符

for (let char of "前端") {
  console.log(char);  // 依次输出"前"、"端"
}

ES6字符串扩展核心价值

功能	解决的问题	典型场景
模板字符串	拼接复杂、多行文本困难	动态文案、HTML模板
`includes()`系列	`indexOf`语义不直观	关键词检测、格式校验
`padStart()`	手动补零/空格低效	时间格式化、表格对齐
`trimStart()`	精准控制空格清除位置	表单输入处理
Unicode增强	四字节字符解析错误	多语言支持、Emoji处理

牢记

「模板嵌变量，查询三剑客（includes/startsWith/endsWith），补全(pad)又去空(trim)，Unicode不再崩，遍历用for-of更轻松！」

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