将十六进制转换为 RGB 字符串

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 JavaScript 将十六进制颜色代码转换为 rgb()rgba() 字符串。我们将学习如何使用按位运算符和掩码从十六进制代码中提取 RGB 值。本实验还将介绍如何处理 3 位和 6 位十六进制代码,以及如何将 alpha 值合并到结果字符串中。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`") subgraph Lab Skills javascript/variables -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/data_types -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/arith_ops -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/comp_ops -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/cond_stmts -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/obj_manip -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/higher_funcs -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/spread_rest -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} javascript/template_lit -.-> lab-28375{{"`将十六进制转换为 RGB 字符串`"}} end

十六进制转 RGB 转换

要将十六进制颜色代码(带或不带 # 前缀)转换为 RGB 字符串,请遵循以下步骤:

  1. 打开终端/SSH 并输入 node 以开始练习编码。
  2. 使用按位右移运算符,并使用 &(与)运算符屏蔽位。
  3. 如果颜色代码是 3 位数字,则首先将其转换为 6 位版本。
  4. 如果在 6 位十六进制代码旁边提供了 alpha 值,则返回一个 rgba() 字符串。

以下是转换的 JavaScript 代码:

const hexToRGB = (hex) => {
  let alpha = false,
    h = hex.slice(hex.startsWith("#") ? 1 : 0);
  if (h.length === 3) h = [...h].map((x) => x + x).join("");
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    "rgb" +
    (alpha ? "a" : "") +
    "(" +
    (h >>> (alpha ? 24 : 16)) +
    ", " +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ", " +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : "") +
    ")"
  );
};

你可以使用以下示例调用 hexToRGB 函数:

hexToRGB("#27ae60ff"); // 'rgba(39, 174, 96, 255)'
hexToRGB("27ae60"); // 'rgb(39, 174, 96)'
hexToRGB("#fff"); // 'rgb(255, 255, 255)'

总结

恭喜你!你已经完成了十六进制转 RGB 实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程