如何使用 JavaScript 将 3 位颜色代码转换为 6 位颜色代码?
在本教程中，我们将了解如何在 JavaScript 中将 3 位颜色代码转换为 6 位颜色代码。
因此，基本上三位数颜色代码以 #RGB 格式表示表单颜色的三位值。要将 3 位十六进制颜色转换为 6 位十六进制颜色，我们只需转换三位数字的每个元素并使其重复即可。
如果我们用简单的方式说，那么复制三位数颜色将给出十六进制值，其值与三位数颜色值相同。
3 位值:#RGB 将在 6 位颜色代码中写为 #RRGGBB。
例如，
3 位值:#08c 6 位颜色代码:#0088cc
算法
步骤 1:
首先，我们将检查其长度，如果它的长度为 3。如果 (hexcolorCode.length === 3)，那么我们才会对此执行某些操作，否则我们将保持原样。因此，如果它满足长度属性，则为 3。
步骤 2:
现在我们将使用 hexcolorCode.split(“”) 方法进行拆分。split() 方法使用分隔符将字符串拆分为数组，默认情况下指定的分隔符是一个空格‘ ‘。
因此，在应用 split() 后，它将返回 [ ‘f’, ‘b’, ‘0’]。
步骤 3:
现在我们将应用 map 方法并遍历数组中的所有项目，然后我们将通过将项目添加到自身来执行重复
因此，我们来自过程 2 的数组是:arr= [ ‘f’, ‘b’, ‘0’]。
应用 map 后 −
arr.map(function(hexVal){
return hexVal+hexVal;
});
步骤 4:
现在我们将应用 join 方法，该方法将数组的每个项目转换为一个字符串，join 方法在连接时在每个数组项目之间都有一个分隔符，如果我们没有在其中指定任何分隔符，则默认情况下它将被视为逗号"，"
因此，从步骤 3 的代码中，我们将最后添加一个 join 方法，
arr.map(function(hexVal){
return hexVal+hexVal;
}).join(‘’);
让我们看看我们的函数代码 -
if(hexcolorCode.length===3){
var arr=hexcolorCode.split("")
var sixDigit=arr.map(function(hexVal){
return hexVal+hexVal;
}).join('');
这里我们所有的步骤都合并了，如果 hexColorCode 的长度是 3，那么我们才会继续前进，之后我们将应用 split 函数将其从输入的字符串转换为数组，然后我们将应用 map，然后在迭代时我们将并行地将其值乘以 ，我们将连接数组中的所有字符。
示例
现在让我们将 JavaScript 函数代码嵌入到 HTML 网页中进行实时检查。
<!DOCTYPE html>
<html>
<body>
<h2>Convert 3 digit hex code to 6 digit code</h2>
<input type="text" id="val" placeholder="Enter 3 digit hexCode " />
<input type="button" value="Convert" onclick="ConvertToSix()" style="color: blue"/>
<h2 id="writeHere"></h2>
<script>
function ConvertToSix(){
var hexcolorCode=document.getElementById("val").value
if(hexcolorCode.length===3){
var arr=hexcolorCode.split("")
var sixDigit=arr.map(function(hexVal){
return hexVal+hexVal;
}).join('');
document.getElementById('writeHere').innerHTML=sixDigit
} else {
document.getElementById('writeHere').innerHTML="Please enter 3 digit hex code..!"
}
}
</script>
</body>
</html>
输出
因此，我们看到了将 3 位颜色代码转换为 6 位十六进制颜色代码的所有过程和步骤，并且了解了如何在实际应用中使用它。
