当从HTML元素属性中获取值时，在JavaScript中将字符串切换为布尔值

Question

我正试图将data-isAdmin切换为true并在切换循环中返回，以下是我的代码:

<div id="is-admin" data-isAdmin="false" onclick="toggleIsAdmin();">
NOT Admin
</div>
<script>
toggleIsAdmin() {
let item = document.getElementById('is-admin').getAttribute('data-isAdmin');
item2 = Boolean(item);
alert(item2);  // ==> true
alert(!item2); // ==> false
}
</script>

应该返回false，翻转后返回true。

我需要字符串"false"被Boolean()函数理解为false而不是true。它的字面拼写是f al s e，而不是t r u e。

如果Boolean()无法理解，将解释任何字符串，甚至是像"这样的空字符串如果为真，那么还有什么函数可以理解字符串& false"作为false，字符串"true"是真的吗?

或者有更简单的方法来切换它?

我期望Boolean()函数能够理解"false">

Answer 1

让事情简单化:

我建议使用data-is-admin而不是data-isAdmin。真的没有理由引入像lodash这样的重依赖来实现如此简单的逻辑。让你的代码简单，易于维护，避免代码"魔术"…

function toggleIsAdmin() {
const element = document.getElementById( 'is-admin' );

if ( !element ) {
throw new Error( 'failed to find element' );
}
if ( element.dataset.isAdmin && element.dataset.isAdmin === 'true' ){
alert( true );
} else {
alert( false );
}
// If you care for one-liners...
// alert( element.dataset.isAdmin === 'true' );
}

如果你想的话，你也可以写一个解析函数，它可以被扩展来支持其他类似真值的值。

function parseBool( boolStr ){
if ( boolStr === 'true' ) {
return true;
}
return false;
}