介绍
随着浏览器的更新,有些功能,我们使用浏览器自带的 API,而不必依赖第三方库,或使用复杂的代码就可以实现。
复制内容到剪贴板
document.execCommand 只能复制选中状态的文本(getSelection()),而 Clipboard API 提供了完整的响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。但当前 document 需要处于焦点状态,例如在控制台使用会报错。
1 | const copyToClipboard = async text => await navigator.clipboard.writeText(text); |
数字转中文
将阿拉伯数字转成中文数字。
1 | const fmt = new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec'); // 大批量处理数字时可以重复使用 |
金额转中文
将阿拉伯数字转成中文金额。
1 | const toCnCurrency = number => new Intl.NumberFormat('zh-CN', { notation: 'compact',style: 'currency', currency: 'CNY' }).format(number); |
公历转农历
将日期转为农历日期。
1 | const toCnDate = date => date.toLocaleString('zh-u-ca-chinese', { dateStyle: 'full' }) + ' ' + date.toLocaleTimeString(0, { hour12: false }); |
生成随机 uuid
在 chrome 92 开始可用,使用加密安全随机数生成器生成 v4 版本 UUID(用连字符分隔的 5 个十六进制的长度 36 位的字符串)。
1 | const uuid = () => crypto.randomUUID(); |
URL 参数解析
解析一个 URL 并返回解析的参数键值对象。
1 | const parseURL = url => Object.fromEntries([...new URL(url).searchParams]); |
深克隆
structuredClone 在 chrome 98 开始可用,深克隆一个可序列化对象(DOM 节点、函数对象都是不可序列化对象),支持克隆递归引用。
1 | const o1 = { a: { b: 1 }, c: 1 }; |
匹配媒体查询
检测是否匹配当前媒体查询。返回的 MediaQueryList 对象在一个 document 上维持着一系列的媒体查询,并可以使用 change 事件监听媒体查询在其 document 上发生的变化。
1 | const isMatch = media => window.matchMedia && window.matchMedia(`(${media})`).matches; |
朗读文本
1 | const speechSynthesis = message => { |
管理 cookie
cookieStore 在 chrome 87 开始可用(目前只有 chrome 和 edge 支持),是一个用于管理 cookie 的 API。
1 | await cookieStore.set('cookie1', 'cookie1-value'); |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 张坤的博客!
评论