freeCodeCamp 每日编程挑战解析用 JavaScript 实现 Hex ValidatorCSS 十六进制颜色校验【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp导读本文围绕 freeCodeCamp 开源课程库中daily-coding-challenges-javascript模块的第 166 道挑战Challenge 166: Hex Validator展开完整讲解如何用 JavaScript 编写一个 CSS 十六进制颜色校验函数isValidHex。你将掌握十六进制颜色的语法规则、边界情况的判定技巧、官方参考实现的逐步拆解以及从课程 Markdown 到在线评测系统的完整运行链路可直接复用于表单校验、主题色配置解析等真实场景。挑战定位它在 freeCodeCamp 课程体系中的位置本挑战文件位于 curriculum/challenges/english/blocks/daily-coding-challenges-javascript/696655d24b614176d4c9b789.md属于daily-coding-challenges-javascript模块。该模块是 freeCodeCamp 课程库中的“每日编程挑战”板块从结构配置 curriculum/structure/blocks/daily-coding-challenges-javascript.json 可以看到该模块包含 250 余道 JavaScript 算法题Challenge 1 到 Challenge 250本文的 Hex Validator 是其中的Challenge 166模块配置中helpCategory: JavaScript、usesMultifileEditor: true、blockLayout: legacy-challenge-list说明它以经典挑战列表的形式组织且使用多文件编辑器作答本挑战的challengeType: 28在 packages/shared/src/config/challenge-types.ts 中定义为dailyChallengeJs每日 JavaScript 挑战类型与dailyChallengePy类型 29Python 版每日挑战共同构成dailyCodingChallengeTypes集合并有配套的语言映射dailyCodingChallengeLanguages。也就是说你在这道题里写的isValidHex函数最终会通过 freeCodeCamp 的课程构建管线进入在线学习界面由评测系统用一系列assert用例自动判定正确性。题目要求CSS 十六进制颜色的判定规则挑战的--description--部分给出了非常明确的规格给定一个字符串判断它是否为合法的 CSS 十六进制颜色CSS hex color。合法条件只有两条必须以#开头后面必须紧跟3 个或 6 个十六进制字符。而十六进制字符的取值范围是数字0到9字母a到f且大小写不敏感a-f与A-F均合法。这条规则对应 CSS 颜色语法中最常见的两种简写与全写形式3 位简写#RGB例如#123、#abc、#fff每位字符在渲染时会被复制为两位6 位全写#RRGGBB例如#123abc、#ABCDEF、#0a1B2c。严格来说题目只校验“格式合法性”不做“语义正确性”判断——只要是合法字符组合即使#000黑色或#fff白色这类极端值也都视为合法。评测用例8 个 assert 背后的边界思维挑战的--hints--部分给出了 8 个测试断言它们是理解题意的关键也是你必须全部通过的验收标准。下面按“正向用例”和“反向用例”分组逐条分析。正向用例应返回true输入预期说明#123true3 位简写全是数字#123abctrue6 位全写数字 小写字母#ABCDEFtrue6 位全写全大写字母#0a1B2ctrue6 位全写大小写混合验证“大小写不敏感”assert.isTrue(isValidHex(#123)); assert.isTrue(isValidHex(#123abc)); assert.isTrue(isValidHex(#ABCDEF)); assert.isTrue(isValidHex(#0a1B2c));反向用例应返回false输入预期失败原因#12GfalseG不在0-9/a-f/A-F范围内#1234567false长度既不是 3 也不是 6#12 3false中间含空格字符且字符集非法ffffalse缺少开头的#assert.isFalse(isValidHex(#12G)); assert.isFalse(isValidHex(#1234567)); assert.isFalse(isValidHex(#12 3)); assert.isFalse(isValidHex(fff));这 8 个用例共同覆盖了四类典型边界开头符号缺失fff、长度不符#1234567、非法字符#12G、#12 3、大小写混合#0a1B2c。任何只做“长度检查”或只做“字符检查”的实现都无法同时通过全部用例——这正是该挑战想要训练的综合校验思维。官方参考实现逐行拆解 isValidHex挑战的--solutions--部分给出了官方参考实现代码如下function isValidHex(str) { if (str[0] ! #) return false; const hex str.slice(1); if (hex.length ! 3 hex.length ! 6) return false; for (let char of hex) { if (!/[0-9a-fA-F]/.test(char)) { return false; } } return true; }步骤一校验起始符#if (str[0] ! #) return false;str[0]取出字符串第一个字符JavaScript 字符串按索引访问字符。只要首字符不是#立即返回false。这一步排除了fff、123abc等所有不以井号开头的输入。步骤二截取并校验长度const hex str.slice(1); if (hex.length ! 3 hex.length ! 6) return false;str.slice(1)去掉开头的#得到纯色值部分。随后严格限定长度只能是 3 或 6。注意这里用的是!双向比较同时排除了空串、#1、#12、#1234、#1234567等一切其他长度。步骤三逐字符校验十六进制字符集for (let char of hex) { if (!/[0-9a-fA-F]/.test(char)) { return false; } }使用for...of遍历色值字符串的每个字符配合正则表达式字面量/[0-9a-fA-F]/做字符集测试。RegExp.prototype.test在字符命中字符集时返回true因此外层取反!表示“只要有一个字符不合法就整体判定非法”。由于字符集同时包含a-f与A-F大小写混合输入#0a1B2c也能顺利通过。步骤四全部通过则返回true所有字符校验完成后函数返回true表示该字符串是合法 CSS 十六进制颜色。该实现的时间复杂度为 O(n)n 为字符串长度最多 7 个字符实际开销极低空间复杂度 O(1)。从题目到评测挑战的运行链路与--seed--机制每个挑战文件都由--description--、--hints--、--seed--、--solutions--等段落组成这些段落由课程构建工具链解析后生成交互式题目界面。初始代码模板seed--seed--中的--seed-contents--是用户进入编辑器时看到的初始模板function isValidHex(str) { return str; }模板只给出函数签名和一个占位返回值return str;显然不满足任何校验条件用户需要自行补充判断逻辑。参考答案的存储位置--solutions--段落保存了官方解答既用于教学展示也用于课程维护时的自动化校验例如curriculum下的 schema 校验工具会检查--solutions--的语法合法性。这道题的解法结构与题目规格一一对应是学习字符串处理与正则表达式的理想范本。挑战类型与评测机制的对应关系如开头所述challengeType: 28在 packages/shared/src/config/challenge-types.ts 中被定义为dailyChallengeJs。该类型位于hasNoSolution无解决方案列表之外且在挑战类型的布局/显示映射challengeViewTypes等中归属 “tests” 视图——这意味着挑战界面会直接展示并执行--hints--中的断言对用户的isValidHex实现做即时测试只有全部 8 个assert通过才算完成。从课程构建角度这些挑战 Markdown 会与curriculum/structure/blocks/daily-coding-challenges-javascript.json中的挑战顺序challengeOrder关联形成完整的“模块 → 挑战”目录树。Hex Validator 的 ID696655d24b614176d4c9b789在配置文件的challengeOrder中被记录为 Challenge 166: Hex Validator前后分别是 Challenge 165Class Average与 Challenge 167Bingo! Letter。扩展与变体正则一行版及其他实现思路除了官方参考实现还可以用更简洁的正则直接完成整题校验function isValidHex(str) { return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(str); }这个版本将三条规则压缩进一个正则^与$锚定字符串首尾杜绝“部分匹配”的漏判例如#fffxyz中间夹杂非法字符的情况#直接匹配起始井号([0-9a-fA-F]{3}|[0-9a-fA-F]{6})用分组与|或逻辑限定色值长度只能是 3 或 6。它与官方实现的判定结果完全等价且避免了for...of循环和slice截取代码更短但正则的可读性对初学者略低。两种写法都值得掌握官方版适合教学讲解步骤清晰正则版适合生产环境的紧凑代码。边界情况自查清单无论采用哪种实现都应覆盖以下输入做自测#f/#12长度不足 3 →false#1234/#12345长度介于 3 与 6 之间 →false#1234567长度超过 6 →false#gggg超出f范围 →false#12_3/#12 3下划线、空格等非十六进制字符 →false123456/缺少#或空串 →false#abcDEF大小写混合且长度为 6 →true。实战延伸Hex Validator 的真实应用场景虽然这是一道教学题isValidHex的逻辑在真实前端项目中非常常见表单校验颜色选择器、主题定制面板中校验用户手输的十六进制色值是否合法非法时给出即时提示配置解析解析 CSS 变量、Tailwind/PostCSS 配置文件中的颜色值过滤非法条目工具函数库作为isHexColor类工具函数暴露给组件库使用配合#RGB转#RRGGBB、hexToRgb等函数形成完整的颜色处理模块。在 freeCodeCamp 课程库中这道题也与同模块的 Challenge 21Hex Generator、Challenge 23RGB to Hex、Challenge 62Hex to Decimal形成呼应——分别对应十六进制颜色的生成、RGB 与 Hex 互转、十六进制数制转换组成一条完整的“十六进制颜色”技能链路读者可依次挑战巩固。总结Challenge 166: Hex Validator 用一道短小精悍的字符串校验题训练了 JavaScript 开发者最常用的三类基础能力字符串索引访问str[0]、字符串切片str.slice(1)与正则字符集匹配/[0-9a-fA-F]/。通过官方参考实现的四步拆解和 8 个评测用例的边界分析你可以彻底掌握 CSS 十六进制颜色的判定规则并理解这类挑战在 freeCodeCamp 课程体系中从 Markdown 源文件到在线评测系统的完整链路。将这段逻辑迁移到真实项目的颜色校验场景即是一份可直接落地的实战方案。深入阅读挑战源文件curriculum/challenges/english/blocks/daily-coding-challenges-javascript/696655d24b614176d4c9b789.md模块挑战顺序配置curriculum/structure/blocks/daily-coding-challenges-javascript.json挑战类型常量定义packages/shared/src/config/challenge-types.ts每日挑战 API 路由测试体现该类挑战的后端交互方式api/src/daily-coding-challenge/routes/daily-coding-challenge.test.ts每日挑战 API 说明api/src/daily-coding-challenge/README.md课程 schema 校验challengeType取值范围为 0–33curriculum/schema/challenge-schema.js【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考