在本文中，我們將學習如何在 JavaScript 中輕松地將十進制數轉換為其等效的十六進制數。我們將研究一些需要執行此操作的真實場景。
數字 toString() 方法
要在 JavaScript 中將十進制轉換為十六進制，請對十進制調用 toString() 方法，將 16 作為基數參數傳遞，即 num.toString(16)。toString() 方法將以十六進制形式返回數字的字符串表示形式。
例如：
const num = 60;
const hex = num.toString(16);
console.log(hex); // 3c
// Use parentheses when calling toString() directly
const hex2 = (60).toString(16);
console.log(hex2); // 3c
Number toString() 方法返回數字的字符串表示形式。如果第一個參數指定了基數，則數字以該基數表示。我們傳遞 16 以使用基數 16，這是十六進制基數。
十六進制使用 16 個符號來表示數字：
0 到 9 表示值 0 到 9
a 到 f（A 到 F）表示值 10 到 16。字母不區分大小寫，因此 3C2b 與 3c2B 的值完全相同。
在數字文字上調用 toString()
如果直接對數字文字調用 toString()，請確保將其括在括號 (( )) 中或使用兩個點 (..before toString():
// Use parentheses
const hex2 = (60).toString(16);
console.log(hex2); // 3c
// Use double dots
const hex3 = 50..toString(16);
console.log(hex3); // 32
如果你只使用一個不帶括號的點，JavaScript 解析器會將其視為數字文字的一部分——小數點——而不是成員訪問運算符。
console.log(40.); // 40
console.log(20.); // 20
所以會出現錯誤，因為在成員名稱之前沒有成員訪問運算符。
// SyntaxError
console.log(40.toString(16));
// SyntaxError
console.log(20.toString(16));
因此，您將數字括在括號中，以便它們之外的所有內容都被視為與數字分開。
console.log((40).toString(16)); // 28
console.log((20).toString(16)); // 14
或者您添加第二個點，它將被視為成員訪問運算符。
console.log(40..toString(16)); // 28
console.log(20..toString(16)); // 14
用例：將 RGB(A) 轉換為十六進制
將十進制值轉換為十六進制值的一種常見用途是將 RGB 顏色代碼轉換為其等效的十六進制值。我們可以這樣做：
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2);
}
function rgbToHex(r, g, b) {
const hexR = padToTwo(decToHex(r));
const hexG = padToTwo(decToHex(g));
const hexB = padToTwo(decToHex(b));
return `#${hexR}${hexG}${hexB}`;
}
console.log(rgbToHex(255, 128, 237)); // #ff80ed
console.log(rgbToHex(195, 151, 151)); // #c39797
console.log(rgbToHex(16, 16, 16)); // #0f0f0f我們創建了一個可重用的 rgbToHex() 函數來將 RGB 代碼轉換為其等效的十六進制代碼。
我們使用 padToTwo() 函數將十六進制代碼填充為兩位數，例如 f -> 0f。
在將 R、G 和 B 的十進制值轉換為十六進制表示后，我們將它們連接到一個以 # 字符為前綴的字符串中，以形成十六進制顏色代碼。
我們可以修改該函數以使其也接受 RGBA 值，其中 A 是用于指定顏色不透明度的百分比值（介于 0 和 1 之間）。A 將是十六進制顏色代碼的前兩個字符，其值介于 00（0 或 0%）和 ff（255 或 100%）之間。
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2);
}
function rgbToHex(r, g, b, a) {
const hexR = padToTwo(decToHex(r));
const hexG = padToTwo(decToHex(g));
const hexB = padToTwo(decToHex(b));
// Set "a" to 1 if not specified
const aAbsolute = Math.round((a ?? 1) * 255);
const hexA = padToTwo(decToHex(aAbsolute));
return `#${hexA}${hexR}${hexG}${hexB}`;
}
console.log(rgbToHex(255, 128, 237)); // #ffff80ed
console.log(rgbToHex(195, 151, 151, 0.5)); // #80c39797
console.log(rgbToHex(16, 16, 16, 0.69)); // #b0101010總結
以上就是我今天跟你分享的全部內容，希望你能從中學到新的東西，感謝閱讀。
