javascript中!?和?!!?的區(qū)別與作用示例詳解
更新時間：2025年06月10日 10:00:50 作者：YD_1989
JavaScript中!取反布爾值,!!強制轉(zhuǎn)換為布爾值,!用于條件判斷取反,!!用于類型轉(zhuǎn)換,這篇文章主要介紹了javascript中!?和?!!?區(qū)別與作用的相關(guān)資料,需要的朋友可以參考下
在 JavaScript 里，! 和 !! 是兩種不同的邏輯運算符，它們的功能和使用場景有明顯區(qū)別。
1、 !（邏輯非運算符）
它的主要作用是 對操作數(shù)進行布爾值取反。具體來說，就是 先把操作數(shù)轉(zhuǎn)換為布爾值，然后取其相反的值。
代碼示例：
console.log(!true); // false
console.log(!false); // true
// 對于非布爾值，會先將其轉(zhuǎn)換為布爾值再取反
console.log(!0); // true（因為 0 轉(zhuǎn)換為布爾值是 false）
console.log(!''); // true（空字符串轉(zhuǎn)換為布爾值是 false）
console.log(!null); // true
console.log(!undefined);// true
console.log(!NaN); // true
console.log(!5); // false（因為 5 轉(zhuǎn)換為布爾值是 true）
console.log(!'hello'); // false（非空字符串轉(zhuǎn)換為布爾值是 true）
console.log(![]); // false（空數(shù)組是對象，轉(zhuǎn)換為布爾值是 true）
console.log(!{}); // false（空對象轉(zhuǎn)換為布爾值是 true）
2、!!（雙重邏輯非運算符）
它其實就是連續(xù)使用兩次 ! 運算符。先通過第一個 ! 對操作數(shù)取反，再用第二個 ! 對取反后的結(jié)果再次取反，最終得到的是操作數(shù)對應(yīng)的布爾值。
console.log(!!true); // true
console.log(!!false); // false
// 對于非布爾值，會將其轉(zhuǎn)換為對應(yīng)的布爾值
console.log(!!0); // false
console.log(!!''); // false
console.log(!!null); // false
console.log(!!undefined);// false
console.log(!!NaN); // false
console.log(!!5); // true
console.log(!!'hello'); // true
console.log(!![]); // true
console.log(!!{}); // true
3、 核心區(qū)別
- !：能將任何值轉(zhuǎn)換為布爾值，并且結(jié)果與該值本身的布爾值相反。
- !!：同樣可以把任何值轉(zhuǎn)換為布爾值，但結(jié)果和該值本身的布爾值相同。其本質(zhì)和 Boolean() 函數(shù)的作用一樣。
4、使用場景
- !：用于條件判斷中取反
const value = null;
if (!value) {
console.log('值為假值（false）');
}
- !!：用于將一個值強制轉(zhuǎn)換為布爾類型，在需要布爾值的場景中經(jīng)常會用到。
const value = 'hello';
const isTruthy = !!value; // true
console.log(`值是否為真值：${isTruthy}`);
5、在 vue 項目中的使用
（1）!（邏輯非運算符）在 vue 中的使用
模板中的條件判斷
在模板里進行條件渲染時，! 可以對數(shù)據(jù)進行取反操作。
<template>
<div>
<!-- 如果 isLoading 為 false，則顯示內(nèi)容 -->
<div v-if="!isLoading">內(nèi)容已加載</div>
<!-- 如果 user 為空，則顯示提示 -->
<div v-if="!user">請先登錄</div>
</div>
</template>
計算屬性中返回取反結(jié)果
在計算屬性里，! 能夠返回取反后的布爾值。
<template>
<div>
<button :disabled="isDisabled">提交</button>
</div>
</template>
<script>
export default {
computed: {
isDisabled() {
// 當(dāng)表單無效時禁用按鈕
return !this.formIsValid;
}
}
}
</script>
（2）!!（雙重邏輯非運算符）
強制轉(zhuǎn)換為布爾值
在模板表達式或者計算屬性中，!! 能把值強制轉(zhuǎn)換為布爾值，這在需要布爾值的場景中很有用。
<template>
<div>
<!-- 將 message 轉(zhuǎn)換為布爾值，判斷是否顯示消息提示 -->
<Alert v-if="!!message" :type="messageType">{{ message }}</Alert>
<!-- 顯示數(shù)據(jù)是否存在的狀態(tài) -->
<span>{{ !!user ? '已登錄' : '未登錄' }}</span>
</div>
</template>
監(jiān)聽事件時處理參數(shù)
在監(jiān)聽事件并處理參數(shù)時，!! 可將參數(shù)轉(zhuǎn)換為布爾值。
<template>
<div>
<input type="checkbox" @change="handleChange">
</div>
</template>
<script>
export default {
methods: {
handleChange(event) {
// 將事件的選中狀態(tài)轉(zhuǎn)換為布爾值
const isChecked = !!event.target.checked;
this.updateStatus(isChecked);
}
}
}
</script>
（3）Vue 特有的注意事項
在 v-bind 中使用
在使用 v-bind 綁定布爾屬性時，!! 可以確保傳入的值是布爾類型。
<template>
<div>
<!-- 確保 loading 是布爾值 -->
<Spinner :loading="!!loadingState" />
</div>
</template>
（4）對比示例
<template>
<div class="user-profile">
<!-- 使用 ! 進行條件判斷 -->
<div v-if="!user">
<button @click="login">登錄</button>
</div>
<!-- 使用 !! 強制轉(zhuǎn)換為布爾值 -->
<div v-if="!!user">
<img :src="user.avatar" alt="用戶頭像">
<h3>{{ user.name }}</h3>
<!-- 在計算屬性中使用 ! -->
<button :disabled="!canEdit">編輯資料</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: null, // 假設(shè)這是從 API 獲取的用戶數(shù)據(jù)
canEdit: true
}
},
methods: {
login() {
// 登錄邏輯...
}
},
computed: {
// 使用 !! 將值轉(zhuǎn)換為布爾值
hasAvatar() {
return !!this.user?.avatar;
}
}
}
</script>
6、總結(jié)
- ! 是取反操作，得到的結(jié)果是布爾值，且與原值的布爾值相反。
- !! 是強制類型轉(zhuǎn)換，得到的結(jié)果也是布爾值，和原值的布爾值相同。
到此這篇關(guān)于javascript中! 和 !! 的區(qū)別與作用示例詳解的文章就介紹到這了,更多相關(guān)js ! 和 !!區(qū)別與作用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用FileReader以utf-8格式讀取文件，根據(jù)文件內(nèi)容是否包含亂碼字符，來判斷文件是否為utf-8，本文就詳細的介紹一下使用，感興趣的小伙伴們可以參考一下2021-06-06
js中AbortController請求中止的實現(xiàn)
AbortController是JavaScript中用于中止Web請求的API,主要應(yīng)用于fetch請求,也可用于其他瀏覽器API和第三方庫,下面就來介紹一下AbortController請求中止的使用,感興趣的可以了解一下2026-01-01
Bootstrap Table可拖動，需要用到它的Resizable擴展插件，下面腳本之家小編給大家?guī)砹薆ootstrap Table列寬拖動的方法，感興趣的朋友一起看看吧2018-08-08
Js中forEach修改原數(shù)組與sort排序經(jīng)典場景詳解
forEach是沒有返回值并且不直接改變原數(shù)組的,今天發(fā)現(xiàn)是不能直接改變,下面這篇文章主要給大家介紹了關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場景的相關(guān)資料,需要的朋友可以參考下2022-05-05
下面小編就為大家?guī)硪黄狫avaScript 完成注冊頁面表單校驗的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項的順序,本文將介紹如何使用原生JavaScript實現(xiàn)這一功能,需要的可以了解下2024-01-01
JS實現(xiàn)遍歷不規(guī)則多維數(shù)組的方法
這篇文章主要介紹了JS實現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2018-03-03
uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序,下面這篇文章主要給大家介紹了關(guān)于如何利用uni-app開發(fā)App的相關(guān)資料,需要的朋友可以參考下2022-11-11
JavaScript開發(fā)小游戲,目標(biāo)是使用JavaScript繪制簡單的二維地圖,采用二維數(shù)組存儲地圖信息,使用表格繪制地圖,每個td單元格存儲數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽WASD鍵,按鍵觸發(fā)時人物做出相應(yīng)操作,人物下一步碰撞到障礙物,終止人物運動2023-10-10
從父頁面調(diào)用iframe中的JavaScript代碼的方法
在Web前端開發(fā)中,iframe（內(nèi)嵌框架）是一種常用的技術(shù),用于在一個頁面中嵌入另一個HTML頁面,然而,有時候我們需要從父頁面與iframe內(nèi)的內(nèi)容進行交互,本文將詳細介紹如何從父頁面調(diào)用iframe中的JavaScript代碼,提供詳細的代碼示例和最佳實踐,需要的朋友可以參考下2024-11-11