javascript 如何在同一输出中更改不同事物的颜色- JS和Node.js

p4tfgftt  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(120)

我正在创建一个JS RPG CLI游戏,我有一个关于样式输出的问题。一旦执行,脚本输出一个框架欢迎。我需要该框架是彩色的,其中的文本需要是白色的。
我需要这个:https://i.stack.imgur.com/XuYYK.png
我用简单的console. log()实现了这一点:

console.log(`
    +-----------------------------+
    |          Welcome !          |
    +-----------------------------+
    `)

要更改颜色,我使用文本的简单颜色参考:

console.log('\x1b[36m%s\x1b[0m', `
    +-----------------------------+
    |          Welcome !          |
    +-----------------------------+
    `)`

我的输出是:https://i.stack.imgur.com/NHtaU.png这将更改所有内容的颜色,包括 * Welcome * 文本,我需要白色。
那么,如何做到这一点呢?

bmp9r5qi

bmp9r5qi1#

为了做到这一点,你需要改变颜色的“欢迎!"。但你的方法是不是很可伸缩的,如果你的事情你将需要使用这个“头”很多次,你可以使用以下代码:

const colors = {
    cyan: '\x1b[36m',
    reset: '\x1b[0m',
    black: "\x1b[30m",
    red: "\x1b[31m",
    green: "\x1b[32m",
    yellow: "\x1b[33m",
    blue: "\x1b[34m",
    magenta: "\x1b[35m",
    cyan: "\x1b[36m",
    white: "\x1b[37m",
    gray: "\x1b[90m",
}

const logHeader = (text, color, textColor = colors.reset) => {
    // At least four spaces on each side of the string
    const length = Math.max(29, text.length + 4 * 2)

    const pipe = `${ color }|${ colors.reset }`
    const emptySpace = length - text.length

    const  leftSpaceLength= Math.floor(emptySpace / 2)
    const rightSpaceLength = emptySpace - leftSpaceLength
    const  leftSpace = Array.from({ length:  leftSpaceLength }).fill(' ').join('')
    const rightSpace = Array.from({ length: rightSpaceLength }).fill(' ').join('')

    const divider = `${ color }+${ Array.from({ length }).fill('-').join('') }+${ colors.reset }`

    const textLine = pipe + leftSpace + textColor + text + colors.reset + rightSpace + pipe

    console.log([ divider, textLine, divider ].map(e => '    ' + e).join('\n'))
}

// this is equivalent to what you had before (of course with the welcome uncolored
logHeader('Welcome !', colors.cyan)

// but you can also change its color
logHeader('Welcome !', colors.cyan, colors.red)

// or easily change the text for later uses
logHeader('Good bye !', colors.green, colors.yellow)

相关问题