JavaScript の console.log をカスタマイズする-jsチュートリアル-php.cn

JavaScript の console.log をカスタマイズする

Mary-Kate Olsen

リリース： 2024-09-23 06:19:07

オリジナル

829 人が閲覧しました

Customize JavaScript

デフォルトの console.log() を拡張して、現在の日時を接頭辞として付ける方法を疑問に思ったことがあるなら:

// Store the default log method:
const _log = console.log;

// Override:
console.log = (...args) => {
    const prefix = `[${new Date().toLocaleString()}]`;
    if (typeof args[0] === "string") args[0] = `${prefix} ${args[0]}`
    else args.unshift(prefix);
    _log(...args);
};

// Examples:
console.log("Test"); // [Date Time] Test
console.log({a: "b"}); // [Date Time] {a: "b"}
console.log("Hello, %s!", "World"); // [Date Time] Hello, World!
console.log("Number: %i", 42); // [Date Time] Number: 42
console.log("%cStylized text", 'color: red'); // [Date Time] Stylized text

ログイン後にコピー

console.log を書くのは面倒なので、デフォルトの動作をオーバーライドする代わりに、console.log を内部的に使用する log() 関数を作成しましょう。

const log = (...args) => {
    const prefix = `[${new Date().toLocaleString()}]`;
    if (typeof args[0] === "string") args[0] = `${prefix} ${args[0]}`
    else args.unshift(prefix);
    console.log(...args);
};

// Examples:
log("Test"); // [Date Time] Test
log({a: "b"}); // [Date Time] {a: "b"}
log("Hello, %s!", "World"); // [Date Time] Hello, World!
log("Number: %i", 42); // [Date Time] Number: 42
log("%cStylized text", 'color: red'); // [Date Time] Stylized text

ログイン後にコピー

ロギングを楽しんでください。ブレークポイントを忘れないでください ;)

以上がJavaScript の console.log をカスタマイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。