ZetCode

JavaScript chalk

最后修改于 2023 年 10 月 18 日

在本文中,我们将展示如何使用 chalk 模块在 JavaScript 中设置文本样式。

chalk 是一个 Node.js 模块,用于设置文本格式的样式,并允许我们创建自己的主题。

请注意,终端可能不支持 chalk 模块的所有功能。

JS chalk 简单示例

以下示例是 chalk 模块的简单演示。

simple.js
import chalk from 'chalk';

console.log(chalk.blue('an old falcon'));
console.log(chalk.keyword('steelblue')('an old falcon'));
console.log(chalk.keyword('khaki').bold('an old falcon'));

我们向终端输出三个彩色文本。

console.log(chalk.blue('an old falcon'));

使用 chalk.blue,我们以蓝色输出文本。

console.log(chalk.keyword('steelblue')('an old falcon'));

使用 keyword,我们可以使用颜色的名称。

console.log(chalk.keyword('khaki').bold('an old falcon'));

chalk 支持链式 API;文本以粗体卡其色显示。

JS chalk 基本文本颜色

chalk 模块具有用于基本文本颜色的函数。

basic_colours.js
import chalk from 'chalk';

console.log(chalk.red('An old falcon'));
console.log(chalk.blue('An old falcon'));
console.log(chalk.green('An old falcon'));
console.log(chalk.cyan('An old falcon'));
console.log(chalk.white('An old falcon'));
console.log(chalk.redBright('An old falcon'));
console.log(chalk.greenBright('An old falcon'));

在示例中,我们以基本颜色输出文本。

console.log(chalk.red('An old falcon'));

我们以红色输出文本。

console.log(chalk.redBright('An old falcon'));

在这里,我们以鲜红色输出文本。

JS chalk 背景颜色

我们可以更改文本背景的颜色。

bg_colours.js
import chalk from 'chalk';

console.log(chalk.bgRed('An old falcon'));
console.log(chalk.bgBlue('An old falcon'));
console.log(chalk.bgWhite.blue('An old falcon'));
console.log(chalk.bgWhiteBright.red('An old falcon'));
console.log(chalk.bgHex('#456323')('An old falcon'));

在示例中,我们更改输出的背景颜色。

console.log(chalk.bgRed('An old falcon'));

使用 bgRed,我们将背景颜色更改为红色。

console.log(chalk.bgWhite.blue('An old falcon'));

我们将背景颜色更改为白色。 由于默认文本颜色也是白色,我们将其更改为蓝色。

console.log(chalk.bgHex('#456323')('An old falcon'));

我们可以使用 bgHex 选择我们的自定义背景颜色。

JS chalk 颜色模式

在 chalk 中,我们可以使用几种颜色模式。

colour_modes.js
import chalk from 'chalk';

console.log(chalk.rgb(232, 34, 122)('An old falcon'));
console.log(chalk.hex('#943255')('An old falcon'));
console.log(chalk.ansi(245)('An old falcon'));
console.log(chalk.hsv(125, 8, 61)('An old falcon'));

在示例中,我们使用 RGB、HEX、ANSI 和 HSV 模式。

JS chalk 修饰符

chalk 支持几个修饰符,包括粗体、斜体和下划线。

modifiers.js
import chalk from 'chalk';

console.log(chalk.bold('An old falcon'));
console.log(chalk.dim('An old falcon'));
console.log(chalk.italic('An old falcon'));
console.log(chalk.underline('An old falcon'));
console.log(chalk.inverse('An old falcon'));
console.log(chalk.strikethrough('An old falcon'));

console.log('----------------------');

console.log(chalk.bold.italic('An old falcon'));
console.log(chalk.dim.italic('An old falcon'));

该示例使用几个 chalk 修饰符。这些也可以组合使用。 例如,chalk.bold.italic 创建粗体和斜体文本。

JS chalk 模板字面量

chalk 模块可以在模板字面量中使用。 模板字面量是允许嵌入表达式的字符串字面量。 占位符中的表达式和反引号之间的文本 (` `)。

template_literals.js
import chalk from 'chalk';

console.log(`${chalk.red('old falcon')}`);
console.log(`${chalk.blue('old falcon')}`);
console.log(`${chalk.dim.underline('old falcon')}`);

在示例中,我们使用 chalk 和 JS 模板字面量输出三行。

JS chalk 标记的模板字面量

标记的模板字面量是模板字面量的更高级形式。

tagged_template_literals.js
import chalk from 'chalk';

console.log(chalk`{red old falcon}`);
console.log(chalk`{blue old falcon}`);
console.log(chalk`{dim.underline old falcon}`);

该示例将 chalk 模块与标记的模板字面量结合使用。

来源

JS chalk GitHub 页面

在本文中,我们使用 chalk 模块在 JavaScript 中设置了文本样式。

作者

我叫 Jan Bodnar,是一位充满激情的程序员,拥有丰富的编程经验。 自 2007 年以来,我一直在撰写编程文章。 迄今为止,我撰写了 1,400 多篇文章和 8 本电子书。 我拥有超过十年的编程教学经验。

查看 所有 JavaScript 教程。