新聞中心
在本文中,我們將學(xué)習(xí)如何在 JavaScript 中輕松地將十進(jìn)制數(shù)轉(zhuǎn)換為其等效的十六進(jìn)制數(shù)。我們將研究一些需要執(zhí)行此操作的真實(shí)場(chǎng)景。

公司主營(yíng)業(yè)務(wù):成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出平昌免費(fèi)做網(wǎng)站回饋大家。
數(shù)字 toString() 方法
要在 JavaScript 中將十進(jìn)制轉(zhuǎn)換為十六進(jìn)制,請(qǐng)對(duì)十進(jìn)制調(diào)用 toString() 方法,將 16 作為基數(shù)參數(shù)傳遞,即 num.toString(16)。toString() 方法將以十六進(jìn)制形式返回?cái)?shù)字的字符串表示形式。
例如:
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() 方法返回?cái)?shù)字的字符串表示形式。如果第一個(gè)參數(shù)指定了基數(shù),則數(shù)字以該基數(shù)表示。我們傳遞 16 以使用基數(shù) 16,這是十六進(jìn)制基數(shù)。
十六進(jìn)制使用 16 個(gè)符號(hào)來表示數(shù)字:
0 到 9 表示值 0 到 9
a 到 f(A 到 F)表示值 10 到 16。字母不區(qū)分大小寫,因此 3C2b 與 3c2B 的值完全相同。
在數(shù)字文字上調(diào)用 toString()
如果直接對(duì)數(shù)字文字調(diào)用 toString(),請(qǐng)確保將其括在括號(hào) (( )) 中或使用兩個(gè)點(diǎn) (..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
如果你只使用一個(gè)不帶括號(hào)的點(diǎn),JavaScript 解析器會(huì)將其視為數(shù)字文字的一部分——小數(shù)點(diǎn)——而不是成員訪問運(yùn)算符。
console.log(40.); // 40
console.log(20.); // 20
所以會(huì)出現(xiàn)錯(cuò)誤,因?yàn)樵诔蓡T名稱之前沒有成員訪問運(yùn)算符。
// SyntaxError
console.log(40.toString(16));
// SyntaxError
console.log(20.toString(16));
因此,您將數(shù)字括在括號(hào)中,以便它們之外的所有內(nèi)容都被視為與數(shù)字分開。
console.log((40).toString(16)); // 28
console.log((20).toString(16)); // 14
或者您添加第二個(gè)點(diǎn),它將被視為成員訪問運(yùn)算符。
console.log(40..toString(16)); // 28
console.log(20..toString(16)); // 14
用例:將 RGB(A) 轉(zhuǎn)換為十六進(jìn)制
將十進(jìn)制值轉(zhuǎn)換為十六進(jìn)制值的一種常見用途是將 RGB 顏色代碼轉(zhuǎn)換為其等效的十六進(jìn)制值。我們可以這樣做:
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我們創(chuàng)建了一個(gè)可重用的 rgbToHex() 函數(shù)來將 RGB 代碼轉(zhuǎn)換為其等效的十六進(jìn)制代碼。
我們使用 padToTwo() 函數(shù)將十六進(jìn)制代碼填充為兩位數(shù),例如 f -> 0f。
在將 R、G 和 B 的十進(jìn)制值轉(zhuǎn)換為十六進(jìn)制表示后,我們將它們連接到一個(gè)以 # 字符為前綴的字符串中,以形成十六進(jìn)制顏色代碼。
我們可以修改該函數(shù)以使其也接受 RGBA 值,其中 A 是用于指定顏色不透明度的百分比值(介于 0 和 1 之間)。A 將是十六進(jìn)制顏色代碼的前兩個(gè)字符,其值介于 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總結(jié)
以上就是我今天跟你分享的全部?jī)?nèi)容,希望你能從中學(xué)到新的東西,感謝閱讀。
當(dāng)前題目:如何在JavaScript中將十進(jìn)制轉(zhuǎn)換為十六進(jìn)制
本文鏈接:http://www.dlmjj.cn/article/djsisdc.html


咨詢
建站咨詢
