여기 이상한 점이 있습니다.

console 메서드에는 their own C-like 문자열 대체 메서드가 있습니다.

잠깐, 문자열 대체?

문자 그대로 문자열의 일부를 다른 것으로 대체합니다. 프로그래밍 영역에서 이는 일반적으로 보간법 또는 문자열 서식 지정을 통해 문자열을 작성하는 것을 의미합니다.

guest = {name: "Fortesque-Delcourt", calling_gift: "a rather nice sherry"}
console.log( `Sir, Mr ${guest.name} has called. He's bought ${guest.calling_gift}` );

// Output:
"Sir, Mr Fortesque-Delcourt has called.  He's bought a rather nice sherry."

문자열을 추가할 수 있습니다. 그래서 무엇입니까?

콘솔 메소드를 사용하면 고유한("C와 유사한"형식)[ https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console ]을 사용할 수 있습니다. 템플릿 리터럴 또는 문자열 연결을 사용할 수 있지만 대체 문자열을 메서드 인수의 일부로 전달하여 자리 표시자와 함께 템플릿을 사용할 수도 있습니다.

console.log(
    "Sir, Mr %s has called. He's bought %s", 
    guest.name, 
    guest.calling_gift
);

// Output:
"Sir, Mr Fortesque-Delcourt has called.  He's bought a rather nice sherry."

리터럴 문자열을 대체하는 것으로 제한되지 않습니다. 대신 템플릿 엔진은 전달된 객체를 자리 표시자가 지정한 데이터 유형으로 변환하려고 시도합니다.

빅토리아 시대 신사의 투자 손실을 나타내는 개체가 있다고 가정해 보겠습니다.

let losses = {
    pounds: 150,
    reputation: 45.7,
    body_parts: "Teeth"
        faith: ["The Markets", "New-Fangled Steam"]
}

다양한 유형을 다른 자리 표시자에 전달할 때 얻는 결과는 다음과 같습니다.


템플릿 문자열
loss.body_part
손실.파운드
손실.평판


"잃어버린 것: %s"
"잃어버린 것: 치아"
"잃어버린 것: 150"
"잃어버린 것: 45.7"

"잃어버린 것: %i"
"잃어버린: NaN"
"잃어버린 것: 150"
"잃어버린: 45"

"잃어버린 것: %f"
"잃어버린: NaN"
"잃어버린 것: 150"
"잃어버린 것: 45.7"

유용한가요?

아니, 특별히. 문자열을 Integer 또는 Float로 전달하면 한 눈에 볼 수 있지만... 세상을 구할 수는 없습니다.

유용한 것은 개체 자리 표시자, %o 및 %O 입니다.

개체 자리 표시자

개체에서 console.log를 호출하면 놀랍도록 도움이 되지 않는 기본toString 출력을 반환할 가능성이 높습니다.

Assertion failed: [object Object]

이건 역겹다... 하지만! 개체 자리 표시자 중 하나를 사용하면 속성 및 해당 값의 열거를 나타내는 항목을 얻게 됩니다. 어떤 종류의 것은 운영자에 따라 다르며 어떤 종류의 콘솔을 사용하고 있습니다.

Node.js CLI

CLI에서 대문자console.log 연산자로 %O를 호출하면 인라인 열거가 생성됩니다.

소문자%o를 사용하면 여러 줄 열거가 생성됩니다.

인라인(%O 포함)

console.log("%O", losses)

//Output:
{ pounds: 150, reputation: 45.7, body_parts: 'Teeth', Faith: ['The Markets', 'New-Fangled Steam'] }

여러 줄(%o 포함)

console.log("%o", losses)

//Output:
{
  pounds: 150,
  reputation: 45.7,
  body_parts: 'Teeth',
  Faith: ['The Markets', 'New Fangled Steam', [length]: 2]
}

브라우저 콘솔

Chrome 콘솔에서는 모든 것이 거꾸로 작동합니다. 여기서 소문자 "%o"연산자는 =inline= 열거형을 반환합니다.

인라인(%o 포함)

console.log("%o", losses)

// Output:
> { pounds: 150, reputation: 45.7, body_parts: 'Teeth', Faith: ['The Markets', 'New-Fangled Steam'] }

개체 연결(%O 사용)

그러나 멋진 부분은 %O 입니다. 대문자 형식을 사용하면 출력 문자열에 개체의 이름만 포함됩니다.
losses 객체가 Losses 클래스의 인스턴스이고 일종의 history 객체도 포함하고 있다고 가정해 보겠습니다. 개체 내부에 쉽게 액세스할 수 있지만 콘솔을 복잡하게 만들지 않는 풍부하고 읽기 쉬운 디버깅 메시지를 만들 수 있습니다.

console.log(
    "Your %O exceed %d pounds. See %o.", 
    losses,
    losses.pounds,
    losses.history
)

//Output:
Your >Losses exceed 150 pounds. See >History.

마무리

이것이 콘솔 문자열 대체의 힘입니다! 간결하지만 풍부한 정보를 제공하는 콘솔 메시지를 쉽게 포맷팅할 수 있습니다.

이 내용이 마음에 드셨다면 왼쪽의 도파민(❤️) 스위치(🦄)를 누르고 JS 콘솔 디버깅 시리즈의 다음 항목에 대한 제 글을 구독하세요!

인식

헤더 이미지는 (@Sigmund)[ https://unsplash.com/@sigmund ]의 것이며 Unsplash 라이선스에 따라 사용됩니다.