JavaScript 字符串true或false转换为Boolean类型数据
程序员文章站
2024-02-26 19:49:22
...
前言：
在写一个按钮切换效果时，遇到了一个数据类型问题。我打算的是通过属性判断按钮是否被选中，设置其属性为true和false，但是奇怪的发现，当属性为空，切换到true，在切换到false，之后一直就为false了，非常奇怪。
后来debuger发现，原来是数据类型出现的错误。
html标签内存的都是字符串，所以使用getAttribute读出来的就是字符串
整体流程是
-
读出字符串为
''，设置其属性为!''等于!0等于true -
读出字符串为
'true'，设置属性为!'true'等于!1等于false -
之后读出字符串为
'false'，设置属性为!'false'等于!1等于false
其中要注意的是，在自动转换比较时，所有数据隐式转换时更偏向转换为数字number类型进行比较。
解决方法：
将字符串转换后再进行非运算
使用方法：
JSON.parse(checked)注意：JSON.parse()不能接受空字串
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE9+兼容性更高的switch按钮</title>
<style>
.switchBtn {
position: relative;
display: inline-block;
width: 4rem;
height: 2rem;
border-radius: 2rem;
box-shadow: inset 0 0 5px rgb(0, 0, 0, .2);
background: #c6c6c6;
transition: .5s
}
.switchBtn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
box-shadow: 0 2px 5px rgb(0, 0, 0, .2);
background: #fff;
transition: .5s
}
.switchBtn[data-checked="true"] {
background: #03a9f4;
}
.switchBtn[data-checked="true"]::before {
left: 2rem;
}
</style>
</head>
<body>
<span class="switchBtn" data-checked></span>
<script>
var switchBtn = document.querySelector('.switchBtn')
switchBtn.onclick = function(e) {
var checked = switchBtn.getAttribute('data-checked')
if(checked === '') {
checked = false
}
switchBtn.setAttribute('data-checked', JSON.parse(checked))
}
</script>
</body>
</html>