Emoji 肤色切换实战：Beaker 内置 skin-tone 库源码解析与 Fitzpatrick 量表应用

• 前端

本文以 Beaker（实验性 P2P 浏览器）仓库内嵌的skin-tone库为主线，深入讲解如何基于 Unicode 肤色修饰符与 Fitzpatrick 量表，在 JavaScript 中为人类形象的 emoji 一键切换皮肤色调。读完本文，你将掌握skin-tone的完整 API、六档肤色常量与底层码点匹配原理，并看到该库如何被 Beaker 的app-stdlib二次封装，用于渲染与支持性检测。

背景：emoji 肤色与 Fitzpatrick 量表

emoji 中所有代表人类的字符（手指、手势、人物、职业角色等），在 Unicode 标准下都可以叠加一组「肤色修饰符」（skin tone modifiers）来呈现不同肤色。这套肤色体系直接沿用医学与皮肤学中的Fitzpatrick 量表（Fitzpatrick scale），它将肤色按日光反应划分为 6 个类型：

• Type-1～2 对应最浅肤色；
• Type-3 为中间偏浅；
• Type-4 为中间偏深；
• Type-5、Type-6 依次加深。

在 Unicode 中，这六档肤色被映射为码点范围U+1F3FB～U+1F3FF的五个修饰字符：🏻（Type-1–2）、🏼（Type-3）、🏽（Type-4）、🏾（Type-5）、🏿（Type-6）。skin-tone库正是围绕这一机制实现的——它只做一件事：给 emoji 追加或移除对应的肤色修饰码点。

Beaker 将这个小巧的第三方库整体 vendor 进了仓库，位于 app/userland/app-stdlib/vendor/emoji-skin-tone/，包含一份 README.md 与一份实现 index.js，是app-stdlib（应用标准库）中 emoji 能力的底层依赖。

安装与引入

作为独立的 npm 包使用时，安装方式如下：

$ npm install --save skin-tone

原版 npm 包以 CommonJS 形式暴露模块，按 README 的示例引入：

const skinTone = require('skin-tone');

需要注意的是：Beaker 仓库内 vendor 的这份源码被改写成了 ES Module 形式（使用export const NONE = 0等具名导出，见 index.js），因此在仓库内部是通过import * as skinTone from '../vendor/emoji-skin-tone/index.js'引入的（见 app/userland/app-stdlib/js/emoji.js）。如果你的项目是 ES Module 工程，可以直接import * as skinTone from 'skin-tone'；CommonJS 工程则沿用require。

核心用法：常量传参与直接传值

skin-tone的使用极其简单，一个函数、两个参数。推荐使用导出的命名常量传参，语义更清晰：

const skinTone = require('skin-tone'); // 把 👍 切换为布朗棕（Fitzpatrick Type-5） skinTone('👍', skinTone.BROWN); //=> '👍🏾' // 也可以直接传入常量对应的数值 skinTone('👍', 4); //=> '👍🏾' // 切到最浅肤色（Fitzpatrick Type-1–2） skinTone('👍', skinTone.WHITE); //=> '👍🏻' // 移除肤色，还原为基础 emoji skinTone('👍🏾', skinTone.NONE); //=> '👍' // 不支持肤色的 emoji 原样透传 skinTone('🦄', skinTone.DARK_BROWN); //=> '🦄'

从源码看（index.js），set()的返回逻辑决定了以上行为：当输入 emoji 不属于可修饰的 base 字符时，函数不做任何追加、原样返回；而当type为0（即NONE）时，只执行“清除已有肤色”这一步，等效于还原基础 emoji。

API 与常量对照表

skinTone(emoji, type)

六个肤色常量

源码在 index.js 中维护了一张skinTones表，并导出同名常量：

源码级原理：可修饰 base 集合与肤色追加

1. 可修饰 emoji 的白名单：emojiModifierBase

并非所有 emoji 都能叠加肤色。skin-tone在 index.js 中硬编码了一个Set——emojiModifierBase，收集所有支持肤色修饰的 base 码点，例如：

• 0x1F44D（👍 竖拇指）、0x1F44A（👊 拳头）、0x270A（✊ 举手）等手势；
• 0x1F466/0x1F467（👦/👧 儿童）、0x1F468～0x1F478区间的人物角色；
• 0x1F3C3（🏃 跑步）、0x1F3CB（🏋 举重）等运动人物；
• 0x1F4AA（💪 肱二头肌）、0x1F590（🖐 手掌）等身体部位。

值得注意的细节是，源码中0x1F468（👨）、0x1F469（👩）、0x1F91D（🤝）、0x1F93C（🤼）四处被注释并标注SUPPORT (prf)（index.js）。从代码结构看，这四者通常以 ZWJ（零宽连接符）组合序列的形式出现（如 👨👩👧👦 家庭序列），而set()只检查emoji.codePointAt(0)（首个码点），无法正确处理组合序列，因此被显式排除。

2. 肤色调换的核心流程

set()的完整逻辑（index.js）可分为三步：

export function set (emoji, type) { if (type > 5 || type < 0) { throw new TypeError(`Expected \`type\` to be a number between 0 and 5, got ${type}`); } // 第一步：清除 emoji 上已存在的任意肤色修饰符 skinTones.forEach(x => { emoji = emoji.replace(x.color, ''); }); // 第二步：仅当 base 码点可修饰且不是 NONE 时，追加目标肤色 if (emojiModifierBase.has(emoji.codePointAt(0)) && type !== 0) { emoji += skinTones[type].color; } return emoji; }

• 参数校验：type必须是0～5的整数，否则直接抛出TypeError，避免下标访问越界；
• 幂等清除：先遍历skinTones表，把🏻🏼🏽🏾🏿五种修饰字符从 emoji 中全部替换为空。这正是“从 👍🏾 切到 👍🏻”也能正确生效的原因——无论原 emoji 带哪种肤色，都会被先复位再追加新肤色；
• 条件追加：用emojiModifierBase.has(emoji.codePointAt(0))判断基础字符是否支持肤色；只有在支持且type !== 0时才拼接对应修饰字符。由于肤色修饰符以独立码点形式追加在 base 之后，实现非常轻量，无需感知字形内部的复杂规则。

在 Beaker app-stdlib 中的集成实践

skin-tone在 Beaker 中并非孤立存在，它被 app/userland/app-stdlib/js/emoji.js 二次封装成一套完整的 emoji 工具模块，是整个应用标准库（app-stdlib）表情能力的基石：

import { FULL_LIST } from '../data/emoji-list.js' import * as skinTone from '../vendor/emoji-skin-tone/index.js' const EMOJI_VARIANT = `\uFE0F` // 该码点强制以 emoji 形式渲染，而非符号形式 export function setSkinTone (emoji, tone) { return skinTone.set(emoji, tone) } export function render (emoji, tone = false) { emoji = emoji.replace('\uFE0F', '').replace('\uFE0E', '') return (tone === false ? emoji : skinTone.set(emoji, tone)) + EMOJI_VARIANT } export function renderSafe (emoji, tone = false) { return render(emoji, tone) } export function isSupported (emoji) { if (!emoji || typeof emoji !== 'string') return false emoji = emoji.replace('\uFE0F', '').replace('\uFE0E', '') return FULL_LIST.indexOf(skinTone.set(emoji, skinTone.NONE)) !== -1 }

从中可以提炼出几个实用模式：

• 统一导出：setSkinTone()直接转发skinTone.set()，对外屏蔽了 vendor 细节；
• 强制 emoji 呈现：render()在调用skinTone.set()之前，先剥离变体选择符U+FE0F（emoji 呈现）与U+FE0E（文本呈现），最后统一追加U+FE0F常量（源码注释明确说明“该码点强制以 emoji 而非符号形式渲染”），保证带肤色的 emoji 在界面上按表情图形展示；
• 支持性检测：isSupported()借助skinTone.set(emoji, skinTone.NONE)先把输入“去肤色”归一化，再与预生成的FULL_LIST（来自 data/emoji-list.js）比对，判断当前环境/字体是否支持该 emoji；
• 数据生成时的肤色剥离：FULL_LIST由 scripts/generate-emoji-list.js 从 scripts/emoji-data.txt（Unicode emoji-test 数据）生成，生成过程会用正则emoji.replace(/🏻|🏼|🏽|🏾|🏿/g, '')主动剥掉所有肤色修饰符（generate-emoji-list.js），保证清单中只保留无肤色版本，再配合isSupported()做运行时归一化判断。

这套组合使 Beaker 的各个用户态应用（编辑器、论坛、Wiki 等基于 app-stdlib 构建的 frontend）能够在聊天输入、评论回复等场景中，为用户表情统一提供肤色选择能力，同时保持对不支持 emoji 环境的优雅降级。

边界与注意事项

• 仅支持 base emoji：set()只判断第一个码点是否命中emojiModifierBase，因此对 ZWJ 组合序列（家庭、职业群体等）和部分由多码点拼装的角色 emoji 不会追加肤色，属于设计内行为；
• 一次只追加一个修饰符：调用前传入的 emoji 若已带肤色，会被先清除再应用新肤色，结果始终只有一个肤色修饰码点；
• 严格参数校验：type不在0～5范围会抛TypeError，业务代码接入时建议对 UI 层取值先做归一化；
• 透传语义：对独角兽🦄这类不可修饰的 emoji 传入任意肤色，都会原样返回，不会报错，可放心用于批量处理。

许可证

本库为 MIT 协议，版权归原作者 Sindre Sorhus 所有（见 index.js 头部许可声明）。它被 Beaker 以 vendor 形式内嵌于app/userland/app-stdlib，遵循项目整体的开源分发方式，可放心在遵守 MIT 条款的前提下复用与学习。

• 前端