string.prototype.at()是es2022引入的原生方法，支持正负索引（如at(-1)取末字符），能正确处理unicode码点（含emoji），比方括号索引更安全、语义更清晰，适用于微前端中已校验字符串的安全字符访问。

String.prototype.at() 是一个用于按索引获取字符串中字符的原生方法，它支持负索引（如 str.at(-1) 获取最后一个字符），且能正确处理 Unicode 码点（包括 emoji 和复合字符）。但它本身与“跨域传输”或“微前端安全”无直接关系——它不参与网络请求、不处理权限、也不影响通信协议。

它不解决跨域问题，也不保障传输安全

微前端中常见的跨域场景（如主应用与子应用通过 iframe 或 postMessage 通信、共享字符串数据）涉及的是：

• 浏览器同源策略限制
• 消息序列化/反序列化（JSON.stringify / parse 的边界）
• 恶意输入注入（如未过滤的字符串被 innerHTML 渲染）
• 编码不一致导致的乱码或截断（尤其含 emoji、中文、代理对）

at() 只在字符串已成功抵达当前执行环境后才起作用。它无法防止传输被拦截、篡改或伪造，也不能替代 CSP、postMessage 白名单、输入校验等安全机制。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

它可在接收端安全地访问多字节字符

当跨域传来的字符串已通过可信通道（如校验过的 postMessage 数据）到达当前上下文，且需按位置读取字符时，at() 比 str[index] 更可靠：

• "?‍?".at(0) → "?‍?"（完整 emoji）；而 "?‍?"[0] 可能只返回首代理项（如 "\ud83d"），造成乱码或逻辑错误
• 适合解析从子应用传来的结构化字符串（如自定义协议标识 "v2:token:abc..."），用 .at(0) 判断版本前缀，避免因字符宽度误判

实际使用建议

若你在微前端中通过 postMessage 接收字符串并需安全索引访问：

• 始终先校验来源：event.origin === 'https://subapp.example.com'
• 验证数据格式：用 typeof data === 'string' + 正则或 schema 检查内容合法性
• 需要取特定位置字符时，优先用 str.at(index) 替代 str[index]，尤其当字符串可能含 emoji、中文、数学符号等
• 避免将接收到的字符串直接拼入 HTML：el.innerHTML = unsafeStr → 改用 el.textContent = safeStr 或严格转义

补充：兼容性注意

at() 在现代浏览器中已广泛支持（Chrome 93+、Firefox 95+、Safari 15.4+），但若需支持旧版 Safari 或 IE，应添加 polyfill 或降级为 Array.from(str)[index]（性能略低但语义等价）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！