Emmet 缩写语法浏览器 - 编写并预览展开
输入 Emmet 缩写,实时显示展开后的 HTML 结构,学习高级 Emmet 技巧。
UD5工具箱
支持 \u{1F600} 大括号形式 & \uXXXX 四位形式 · 实时互转 · 一键复制
\u{...} 大括号包裹十六进制码点,可以表示 任何 Unicode 字符(U+0000 到 U+10FFFF)。相比传统的 \uXXXX(仅4位,只能表示BMP内字符),\u{...} 可以表示补充平面(SMP/SIP)中的字符,包括绝大多数 Emoji。例如 \u{1F600} 表示 😀(U+1F600)。
\u00E9 → é。\u{1F680} → 🚀。这是 ES6 新增语法。\u{...} 格式。\u{...} 转义可以直接用码点表示,避免代理对带来的困惑。此外,一些 Emoji 由多个码点 + ZWJ(零宽连接符)组合而成(如 👨👩👧👦),转义后可以清晰看到其构成。
const emoji = '\u{1F600}'; // → 😀const str = 'Hello \u{1F389} World'; // → Hello 🎉 WorldString.fromCodePoint(0x1F600) // → 😀'😀'.codePointAt(0).toString(16) // → '1f600'
\uD83D\uDE00。使用 \u{1F600} 语法可以直接用码点表示,更加直观。使用 [...str] 或 for...of 可以正确按码点遍历字符串,避免拆分代理对。
| Emoji | 码点 | JS 转义 | 名称 |
|---|---|---|---|
| 😀 | U+1F600 | \u{1F600} | Grinning Face |
| 😂 | U+1F602 | \u{1F602} | Face with Tears of Joy |
| ❤️ | U+2764 + U+FE0F | \u{2764}\u{FE0F} | Red Heart |
| 🎉 | U+1F389 | \u{1F389} | Party Popper |
| 🚀 | U+1F680 | \u{1F680} | Rocket |
| 🔥 | U+1F525 | \u{1F525} | Fire |
| 👍 | U+1F44D | \u{1F44D} | Thumbs Up |
| ✨ | U+2728 | \u{2728} | Sparkles |
输入 Emmet 缩写,实时显示展开后的 HTML 结构,学习高级 Emmet 技巧。
列出所有 Reflect 静态方法,提供参数输入并执行,查看返回值和副作用。
创建带 # 私有字段的类,尝试外部访问观察语法错误,理解封装。
使用原生HTML Popover属性创建提示、菜单与对话框,展示四种触发方式及样式定制。
将HTML标记转换为Pug(原Jade)的缩进语法模板,去除尖括号,让模板开发更快速。
浏览Emoji的Unicode属性:码点、版本、肤色支持、是否推荐等详细信息。
将HTML代码转换为兼容React JSX的代码(class→className,style→对象等)。
将普通CSS代码转换为Styled Components的模板字符串格式。
对比 ES Module 和经典脚本的变量作用域、严格模式以及执行时机。
创建 Symbol,查看其描述与唯一性,理解如何作为对象属性键使用。
对简单混淆的JS进行格式化,并尝试将短变量名替换为更具描述性的名称,提高可读性。
设置字母与Emoji对应表,将文本转为Emoji序列发给朋友解码。
利用 `:target` 伪类创建无需JavaScript的弹窗组件,支持关闭按钮和遮罩层。
随机选取两个 Emoji 并排显示,激发创意灵感,用于故事或设计。
将Markdown文本即时转换为HTML代码,实时预览样式,直接复制HTML用于网站发布。
选择扩展类型(弹出、内容脚本、后台),生成完整的项目文件和 manifest.json。
分类展示所有Unicode Emoji表情,支持关键词搜索,点击即可复制表情符号,用于社交媒体或文档。
设置总页数与当前页,生成数字式或省略式分页导航条。
输入文字描述或符号(如K, P),生成编织花样预览图,方便织女试读图解。
将Pug模板语法编译回标准HTML代码,支持变量与混入预览,辅助模板调试。
选择眼睛、嘴巴、装饰等部件,拼出独特的Emoji组合序列,如 smiling face with sunglasses 。
通过实例展示原生拖放 API 的使用,包括文件拖拽上传和页面元素排序功能。
生成实现点击锚点平滑滚动到目标位置所需的JS代码及CSS scroll-behavior。
配置字体、颜色、背景,生成可粘贴到浏览器控制台的%c格式化日志代码。
展示一些常用内置HTML元素和自定义元素例子,提供代码复制。
拖拽文本框、下拉框、单选复选等元素,排列组成表单,导出整洁的HTML表单结构代码。
生成类似社交媒体的Emoji反应选择栏HTML/CSS代码,带计数和动画。
绘制 SVG 路径,将动画元素绑定到路径上,生成 offset-path 动画代码。
在同一数据上运行多种数组遍历方式,测量并比较它们的执行时间,辅助性能优化决策。
粘贴文本,提取所有Emoji并统计每个表情的出现次数,生成排行榜。