Cách hiện thị màu(color, bgcolor) trong console.log() của developer javascript!

Nội dung bài viết

Video học lập trình mỗi ngày

console.log là gì? Một câu hỏi hài hước vì ở bất kỳ đâu trong javascript các lập trình viên cũng quen thuộc với console.log. Nhưng tôi cá đôi lúc nó cũng khiến chúng ta rơi vào cảnh hỗn loạn khi print tất cả các record đều giống nhau. Tôi cũng vậy, trong khi viết code tôi cảm thấy bất tiện và tôi cảm thấy sự cần thiết khi out ra với các color mà tôi chỉ định. Bài viết này tôi sẽ thảo luận với các bạn về vấn đề này.


Trước tiên khi tôi viết code tôi bắt đầu cảm thấy sự cần thiết với các output được xuất ra khi sử dụng với console.log() với các tất cả color mà tôi chỉ định

Ví dụ tôi muốn các lỗi xuất hiện với màu đỏ, or cảnh báo bằng màu vàng. Có thể hiện tại js cung cấp console.error() và console.warn().

Nhưng thực tế thì chúng ta còn ham hố hơn nhiều. Vì không chỉ màu sắc, mà chúng tôi ta đôi lúc còn muốn output ra màu nền.

Vậy hôm nay trong bài viết này tôi sẽ cung cấp một funcion mà tôi được sử dụng trong Utility.js của tôi.

Cú pháp Console

const colorize = (...args) => ({
      black: `\x1b[30m${args.join(' ')}`,
      red: `\x1b[31m${args.join(' ')}`,
      green: `\x1b[32m${args.join(' ')}`,
      yellow: `\x1b[33m${args.join(' ')}`,
      blue: `\x1b[34m${args.join(' ')}`,
      magenta: `\x1b[35m${args.join(' ')}`,
      cyan: `\x1b[36m${args.join(' ')}`,
      white: `\x1b[37m${args.join(' ')}`,
      bgBlack: `\x1b[40m${args.join(' ')}\x1b[0m`,
      bgRed: `\x1b[41m${args.join(' ')}\x1b[0m`,
      bgGreen: `\x1b[42m${args.join(' ')}\x1b[0m`,
      bgYellow: `\x1b[43m${args.join(' ')}\x1b[0m`,
      bgBlue: `\x1b[44m${args.join(' ')}\x1b[0m`,
      bgMagenta: `\x1b[45m${args.join(' ')}\x1b[0m`,
      bgCyan: `\x1b[46m${args.join(' ')}\x1b[0m`,
      bgWhite: `\x1b[47m${args.join(' ')}\x1b[0m`
})

Cách sử dụng:

      console.log(colorize('Blog anonystick.com', JSON.stringify({data: 1})).red);
      console.log(colorize('Blog anonystick.com', 'Developer js' ).bgCyan);
      console.log(colorize(colorize('Blog anonystick.com').green, colorize('Developer js').magenta).bgWhite);

Output:

console.log() with color


Happing code!

Có thể bạn đã bị missing