HSL を配列に変換する

Beginner

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

はじめに

この実験では、JavaScript を使ってhsl()カラー文字列を値の配列に変換する方法を探ります。正規表現と配列メソッドを組み合わせて、文字列をから数値を抽出し、数値の配列に変換します。この実験は、JavaScript での色の値の扱い方を理解し、正規表現と配列操作のスキルを向上させるのに役立ちます。

HSL を配列に変換する

hsl()カラー文字列を値の配列に変換するには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングを練習するためにnodeと入力します。
  2. String.prototype.match()を使って、数値を含む 3 つの文字列を要素とする配列を取得します。
  3. Array.prototype.map()Numberと組み合わせて、それらを数値の配列に変換します。

以下は、hsl()カラー文字列を数値の配列に変換するコードです。

const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);

使用例:

toHSLArray("hsl(50, 10%, 10%)"); // [50, 10, 10]

まとめ

おめでとうございます!あなたは HSL を配列に変換する実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに実験を練習することができます。