Template literals - JavaScript | MDN (mozilla.org)

이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다.

보통 키보드 가장 왼쪽상단 1 숫자키 옆 또는 esc키 아래에 있는 물결문자 넣을때 사용하는 키를 그냥 누르면 나타납니다.``

``안에  ${}안에 변수나 표현식을 넣어서 문자열 안에서 동적으로 값을 표현할 수 있습니다.

여러줄인 경우도

//따옴표인경우
console.log("string text line 1\n"+  
"string text line 2");

//백틱인경우
console.log(`string text line 1
string text line 2`);

console.log

개발자 도구의 콘솔(console)에 로그를 출력하는 메소드입니다. 주로 디버깅용으로 사용됩니다.

개발자 도구의 콘솔(console) <-- PC브라우저 사용시 F12 키 누른 후 콘솔탭

문자열 출력

console.log('Hello, world!');

변수 값 출력

const myVar = 42;

console.log(myVar);

객체 출력

const myObj = { name: 'John', age: 30 };

console.log(myObj);

변수 값과 문자열 조합 출력

const myVar = 'world';

console.log(`Hello, ${myVar}!`);

로그의 스타일 지정

console.log('%cHello, world!', 'color: blue; font-size: 20px;');

let num1 = 10;
let num2 = 20;
let str = "hello";

console.log(num1, num2, str);

let obj = { name: "John", age: 30 };
console.log(`My name is ${obj.name} and I'm ${obj.age} years old.`);

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
console.log(`Person: ${JSON.stringify(person)}`);

console.log(`Age: {}`, person);

console.log(`hello:%s, im %d`, 'xx', 20);