拡張された 16 進数値：3 桁から 6 桁のカラーコード変換のマスター

はじめに

この実験では、JavaScriptを使って3桁のカラーコードを6桁のカラーコードに拡張する方法を探ります。文字列の先頭に # がある場合はそれを削除するために、map()、split()、join() などの配列メソッドと slice() を使います。この実験は、JavaScriptで文字列を操作して配列を使って目的の出力を得る方法を理解するのに役立ちます。

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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28292{{"拡張された 16 進数値"}} javascript/data_types -.-> lab-28292{{"拡張された 16 進数値"}} javascript/arith_ops -.-> lab-28292{{"拡張された 16 進数値"}} javascript/comp_ops -.-> lab-28292{{"拡張された 16 進数値"}} javascript/higher_funcs -.-> lab-28292{{"拡張された 16 進数値"}} end

3桁のカラーコードを6桁のカラーコードに拡張する方法

コーディングを練習するには、ターミナル/SSHを開いて node と入力します。3桁のカラーコードを6桁のカラーコードに拡張するには、次の関数を使用できます。

const extendHex = (shortHex) =>
  "#" +
  shortHex
    .slice(shortHex.startsWith("#") ? 1 : 0)
    .split("")
    .map((x) => x + x)
    .join("");

3桁のRGB表記の16進数カラーコードを6桁の形式に変換するには、次の手順に従います。

Array.prototype.map()、String.prototype.split()、および Array.prototype.join() を使用して、マッピングされた配列を結合します。
一度追加されるため、文字列の先頭から # を削除するには、Array.prototype.slice() を使用します。

以下はいくつかの例です。

extendHex("#03f"); // '#0033ff'
extendHex("05a"); // '#0055aa'

まとめ

おめでとうございます！あなたは「拡張された16進数値」の実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習することができます。