Blog logo Simple's blog
Làm thế nào chuyển giá trị bất kỳ sang boolean trong JS
  2020-04-20    1.2k Words  7 Mins

Thực ra đây không phải là câu hỏi khó, “Làm thế nào để chuyển một giá trị sang kiểu boolean để so sánh hoặc kiểm tra?”. Có hai cách kinh điển hay được giới giang hồ sử dụng đó là !! double “cưỡng chế” :))) và dùng object Boolean.

Các bạn copy đoạn code này chạy thử xem.

1
2
3
4
5
const value = ''; // thử với giá trị khác xem

console.info(!!value); // false

console.info(Boolean(value)) // false

9 giá trị convert về boolean luôn cho false

Các bạn ghi nhớ có 9 cái giá trị khi convert về boolean sẽ luôn cho false (trên MDN web docs thì bảo là 8, mình thì thích 9), đó là:

  • false
  • undefined
  • null
  • NaN
  • 0
  • -0
  • +0
  • 0n
  • '' - chuỗi rỗng

Thực ra +0 với 0 cũng như nhau :D. Ngoài mấy cái đó ra sẽ cho về true cả. Thử xem nhé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
console.info(!!false);
console.info(!!undefined);
console.info(!!null);
console.info(!!NaN);
console.info(!!0);
console.info(!!+0);
console.info(!!-0);
console.info(!!0n);
console.info(!!'');
console.info(!!``);

// tất cả đề là false

console.info(Boolean(false));
console.info(Boolean(undefined));
console.info(Boolean(null));
console.info(Boolean(NaN));
console.info(Boolean(0));
console.info(Boolean(+0));
console.info(Boolean(-0));
console.info(Boolean(0n));
console.info(Boolean(''));
console.info(Boolean(``));

Ngoài các cái trên thì bạn thử kiểu gì nó cũng cho về true.

1
2
3
4
5
6
7
8
9
10
console.info(!!'false');
console.info(!![]);
console.info(!!'null');
console.info(!!Infinity);
console.info(!!{});
console.info(!!'0');
console.info(!!new Number(0));
console.info(!!new Boolean(false));

// tất cả đều là true

Bởi vậy hãy lưu ý khi dùng để check điều kiện hoặc xài với toán tử logic || và && nhé. Bởi vì nhiều cái lỗi xảy ra như vậy nè, nhưng lại không biết là do đâu.

1
2
3
4
5
6
7
8
9
10
11
12
13
// giả dụ value sẽ được set bằng mảng rỗng
let value = [];
let defaultValue = [] || ['one', 'two']; // tưởng sẽ in ra mảng 2 phần tử

// người viết expect là mảng rỗng thì throw Error
// đinh ninh nó sẽ vào đây, vì nghĩ nó là false
if (!value) {
  throw new Error('Empty array');
}

console.info(defaultValue); // []

// nhưng sẽ không bao giờ throw lỗi

Hoặc như vầy

1
2
3
4
5
6
7
8
9
10
let value = 'false';
let and = {} && 100; // toán tử && sẽ in ra {}, còn toán tử || sẽ in ra {} nha

if (!value) {
  throw new Error('False');
}

console.info(and); // 100

// nhưng sẽ không bao giờ có lỗi xảy ra

Cái false trong ngoặc đơn kia thực chất là chuỗi ('false') mà chuỗi có giá trị nghĩa là chuỗi không rỗng, không rỗng thì méo nào false được, đúng không nào. Rứa mà lúc code JS mình lại nhầm đấy :))). Mất nguyên tiếng đồng hồ ngồi mò, vler.

Dấu !! nghĩa là gì

Theo như bài viết cách đây không lâu của mình Caret, carrot đọc là cà rét hay cà rốt 🥕 thì mình thích định nghĩa vài thứ. Nên mình sẽ gọi dấu !! là double cưỡng chế :v. Giỡn chớ thực chất nó hoạt động theo cỡ chế ép kiểu và phủ định thôi.

Cùng phân tích quá trình chuyển “cưỡng chế” !!'' nhé:

Đặt dấu ! trước giá trị, nó sẽ thực hiện hai bước “chuyển đổi nhỏ”

  • Step 1: Đầu tiên chuyển nó về boolean (ép kiểu về), nghĩa là chuyển '' về boolean, '' chuyển về boolean là false
  • Step 2: Bước hai sẽ phủ định lại cái kết quả ở step 1, chuyển thành true.

Dấu ! tiếp theo sẽ phủ định là kết quả ở trên, nghĩa là ở trên được true thì sẽ phủ định thành false.

1
2
console.log(!''); // true
console.log(!!''); // false

Vậy là được kết quả như ý, '' ép xong, lại phủ bỏ, à nhầm, phủ định thì thành false.

Convert string number kết hợp với + và ~~

Giả dụ bạn biết chắc chỗ đó trả về số, nhưng số này có thể là number hoặc string number, bạn muốn check khác 0 nữa thì làm thế nào, không thế dùng !!'0' được bởi vì nó trả về true. Thì lúc này xài kết hợp ngay + hoặc ~~.

1
2
3
4
5
6
7
8
9
10
11
const value = '0'; // or 'asd', '10', 'NaN', 'Infinity', '0.2'

// 'Infinity' and '0.2' are true
if (!!+value) {
  console.info('This is a number different zero or it is Infinity');
}

// 'Infinity' and '0.2' are false
if (!!~~value) {
  console.info('This is a number different zero');
}

Dùng dấu + và ~~ ở đây là với mục đích là ép kểu về int, sau đó !! sẽ làm phần còn lại.

Với + sẽ ép về kiểu Number.

1
2
3
console.info(+"1"); // 1

console.info(Number("1")); // 1

Với ~~ là double toán tử bitwise NOT, thường thay thế Math.floor(), nhưng hai chúng nó khác nhau nhé.
Công thức như sau -(-(N + 1))

1
2
3
4
5
console.info(~"1"); // -2

console.info(~~"1"); // 1

console.info(~~~"1"); // -2

Tóm lại

Có cụm từ chuyên ngành truthy và falsy các bạn đọc thêm cho vui. Và trên đó là hai cách kinh điển trên bạn xài cái nào cũng được cả, nhưng phải đồng nhất nhé. Have fun.

Refer

Làm thế nào chuyển giá trị bất kỳ sang boolean trong JS
lap-trinh/Lam-the-nao-chuyen-gia-tri-bat-ky-sang-boolean-trong-JS/
Tác giả
simple
Published
2020-04-20 23:25
License
 Comments
Comment plugin failed to load
Loading comment plugin
  1. 9 giá trị convert về boolean luôn cho false
  2. Dấu !! nghĩa là gì
  3. Convert string number kết hợp với + và ~~
  4. Tóm lại
  5. Refer
© 2019 - 2025    simple
  1. 9 giá trị convert về boolean luôn cho false
  2. Dấu !! nghĩa là gì
  3. Convert string number kết hợp với + và ~~
  4. Tóm lại
  5. Refer