前端開発では、Math.random()という関数があります。この関数は 0 から 1 の間のランダムな数値を返します。
では、実際の開発でランダムな色を取得したい場合はどうすればよいでしょうか。まず、Math.random()を使用して数値を取得し、数値にはtoString()関数があります。この関数は数値を文字列に変換することができます。重要なのは、toString()関数に変換する基数を指定できることです。例えば、Math.random().toString(2)とすると、2 進数が得られます。
色の基数は 16 進数ですので、16 を指定すれば良いです。
簡単に切り取ります。
簡単な関数を作ります。
しかし、このように書くと問題があります。ランダムな数値は 0 から 1 の間ですので、0.5 などが出てくると、変換後の桁数が足りません。明らかに、色の要件に合いません。
足りない場合は、自分で文字列の末尾に追加する必要があります。padEnd()を使用することができます。
文字列が 6 桁に足りない場合、後ろに十分な数の 0 を追加します。もちろん、0 を追加する必要はありません。色に合致するなら、自分で追加してください。
function randomColor () {
return '#' + Math.random().toString(16).slice(2,8).padEnd(6,'0');
}
console.log(randomColor())
ランダムな色を生成するだけでなく、ランダムな文字列も生成することができます。Math.random().toString(36)とします。
36 進数とは何でしょうか。10 個の数字と 26 個のアルファベット、合計 36 個です。
簡単な関数を作ります。
文字列の長さを指定することもできます。少し変更してみましょう。
しかし、このように生成される文字列は限られています。最初に生成されるランダムな数値の桁数が限られているため、指定した長さが生成された長さを大幅に超える場合、余分なカスタム文字列が後ろに追加されます。これは私たちが望むランダムな文字列とは一致しません。
数えてみると、一般的に生成される長さは 11 桁です。したがって、再帰的に関数を修正します。
これにより、超長い文字列もサポートされます。
function randomString(len) {
if (len <= 11) {
return Math.random().toString(36).slice(2, 2 + len).padEnd(len, '0');
} else {
return randomString(11) + randomString(len - 11)
}
}
console.log(randomString(100))