前面几位已经把原理讲得比较全了，我从「优缺点速览 → 部署要求清单 → 迁移检查项」三个维度做个结构化整理，方便直接拿去评审和上线： 一、优缺点对比1. Hash 模式原理URL 形如 /#/user/1，# 及其后面的内容不会随 HTTP 请求发送到服务器，靠监听 hashchange 事件驱动视图切换。优点：- 零服务端配置，静态文件丢到任何服务器/对象存储都能跑，刷新、直达子路径都不会 404；- 兼容性最好，包括老浏览器。缺点：- URL 带 #，不够美观规范；- 对传统搜索引擎 SEO 不友好（爬虫通常忽略 hash 片段）；- 微信 JS-SDK 签名、OAuth/支付回调等场景，URL 参数处理容易踩坑。2. History 模式原理：基 HTML5 History API（pushState/replaceState）+ popstate 事件，URL 是真实路径。优点：- URL 干净、美观，贴近真实路径；- 利于搜索引擎收录和链接分享。缺点：- 强依赖服务端回退配置：深层路径刷新或直接访问时，请求会真实打到服务器，未配置回退就直接 404。 二、部署要求1. Hash 模式：无特殊要求，构建产物直接上传即可。2. History 模式：必须做回退（fallback），把未匹配的路径回退到 index.html：- Nginx：location / { try_files $uri $uri/ /index.html; }，注意 /api 等接口路径要走 proxy_pass 单独处理，别把接口请求也回退成首页 HTML；- 华为云 OBS 静态网站托管：索引文档设为 index.html，错误文档也设为 index.html，否则深链接刷新直接 404；用了 CDN 的话注意 404 回退响应不要被长期缓存；- 静态资源用绝对路径（或正确配置 base/publicPath），相对路径在深层路由刷新时目录会拼错，表现为样式和 JS 404。 三 Hash 迁移到 History 的注意细节顺序不能反：先上线服务端回退配置并验证（直接访问一个深层路径能返回 index.html），再发布 history 版前端。2. 老链接兼容：以前分享出去的 /#/xxx 链接切到 history 后无法直达，入口加过渡逻辑：识别 location.hash 形如 #/path 时 replace 到对应路径。3. 第三方回调白名单：OAuth 登录、支付回跳等在 hash 模式下回调地址带 #，换成干净路径后要同步更新开放平台后台的白名单。4. 微信分享/JS-SDK 签名：hash 模式签名 URL 需去掉 # 后部分，history 模式用完整 URL，迁移时签名逻辑要一起改。5. 滚动恢复与锚点：history 模式下 SPA 跳转后滚动位置需手动恢复（如 scrollBehavior）；hash 模式里 # 同时承担路由和锚点，页内锚点要额外处理。6. 埋点：两种模式的路由跳转都不触发真实页面加载，PV 统计都要监听路由变化上报，迁移时别漏。四、选型一句话内部系统、嵌入第三方页面的微前端、想省事的演示站点，用 hash；面向公网、需要分享传播和 SEO 的站点，用 history，但务必把「服务端回退」写进上线检查单逐项验收。、从        于     ：  

模板字符串（Template Literals）是 ES6 引入的字符串字面量，用反引号 ` 包裹。相比普通字符串（单/双引号），它多出三类能力：表达式插值、多行文本、标签模板。一、表达式插值${ } 里可以放任意表达式，求值后转成字符串拼入结果——变量、运算、函数调用、三元表达式、对象属性都可以，不必再用 + 拼接：const name = '小林', count = 3;const msg = `用户 ${name}，你有 ${count} 条消息，${count > 0 ? '请及时处理' : '暂无待办'}`;两个细节：一是插值在字符串创建时立即求值，之后变量再变、字符串不会跟着变，需要“动态模板”就把生成逻辑包成函数、用时再调用；二是插值结果会自动做 ToString 转换，对象默认得到 [object Object]（要先 JSON.stringify 或自定义 toString），null/undefined 会原样拼成 "null"/"undefined"，拼接前最好给默认值，如 ${user.name ?? '匿名'}。二、多行文本模板里可以直接换行，换行符原样保留，不需要 \n，特别适合拼 HTML 片段、SQL 和日志：const html = `     ${item.title} `;代价是源码缩进也会进入结果，介意多余空白时可用 trim() 或续行顶格。列表渲染的常见写法是 map 成模板再 join('')：const list = items.map(i => `${i.name}`).join('');三、嵌套与转义模板可以嵌套，外层 ${ } 里可以再写模板。文本里要出现反引号或 ${ 本身时用反斜杠转义：\` 和 \${。四、标签模板（进阶）模板前加函数名即成标签模板：tag`a${x}b`。标签函数的第一个参数是字符串片段数组（还带 .raw 原始片段数组），其余参数是各插值的值，可以在拼装前统一做转义、国际化、SQL 参数化等处理。内置的 String.raw 就是一个标签函数：String.raw`C:\temp\new` 能保留反斜杠原样，不被当成转义。五、常见坑1. 安全：插值不做 HTML 转义，用户输入直接拼进 innerHTML 仍有 XSS 风险，渲染前要转义或改用 textContent。2. 可读性：表达式里别塞复杂逻辑，先算好再插值，调试和维护都更容易。一句话：普通字符串是“纯文本”，模板字符串是“带表达式求值的文本”，凡是拼变量、多行排版、生成结构化文本（HTML/SQL/日志）的场景，都优先用它。