Поиск других синтаксисов для console.log ("% cText", "css: value") - PullRequest
Новая
       100

Поиск других синтаксисов для console.log ("% cText", "css: value")

1 голос
/ 27 мая 2020

Я только что обнаружил, что можно сделать magi c в консоли, добавив второй аргумент в console.log (...) , содержащий форматирование CSS . Хитрость заключается в том, чтобы добавить к тексту префикс % c. Например, следующее: перспектива погружения.

Думаю, c означает css, а знак процента - это какой-то escape-символ, о котором я не знал. Я тоже погуглил, но из-за используемого синтаксиса немного сложно указать, что я ищу. И, как мы все знаем, Google не умеет читать мысли.

Вопрос двоякий. Какой еще синтаксис доступен для ведения журнала консоли, особенно со знаком процента (это похоже на инструмент sh) и / или как я могу самостоятельно исследовать этот материал в Google?

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

Пространство имен консоли , которое включает все определения функциональности https://console.spec.whatwg.org/

еще одна полезная ссылка https://developer.mozilla.org/en-US/docs/Web/API/console

другой % синтаксис включает 

%o or %O    Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.

%d or %i    Outputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01

%s  Outputs a string.

%f Outputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10

CSS стиль

Для немедленного тестирования

вы можете запустить эту команду, проверив StackOverflow, пропустив ее в разделе консоли и нажав ввод 

console.log("This is %cStackoverflow", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
1 голос
/ 25 июня 2020

Указатель формата консоли

как это работает? Спецификаторы формата консоли содержат символ % после буквы, указывающей, что мы пишем тип форматирования, который должен применяться к значению.

Мы можем передать второй параметр в console.log по мере изменения эффекта в строке сообщение в соответствующем порядке или для вставки значений в строку вывода.

список спецификаторов формата консоли и соответствующих выходов 

Console Specifier     Output 
 %s                   Formats the value as a string
 %i or %d             Formats the value as an integer
 %f                   Formats the value as a floating point value
 %o                   Formats the value as an expandable DOM element. As seen in the Elements panel 
 %O                   Formats the value as an expandable JavaScript object
 %c                   Applies CSS style rules to the output string as specified by the second parameter

Например, запустите эту строку в консоли: 

const text = "This is a default font style";

console.log("%c" + text,"color: blue; font-size: 20px");
console.log("Hi %s, my name is %s", 'world', 'Joe',);
console.log(
'Hello %cAlligator%c!',
'color: #008f68; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);',
'color: hotpink; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);'
);

var a = [34, 203, 3, 746, 200, 984, 198, 764, 9];
console.log('myFunc(%o)', a);


console.log('%c' + text, 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)');

Чтобы узнать больше об этом, обратитесь к официальной документации .

...