자바 스 크 립 트 코드 로그 착색 에 대한 자세 한 설명

머리말
자 바스 크 립 트 개발 프로젝트 를 사용 할 때 console.log 를 통 해 로 그 를 인쇄 하여 문 제 를 편리 하 게 분석 할 수 있 습 니 다.그러나 상대 적 으로 비교 항목 에 접촉 하면 검은색 로그 출력 은 그 역할 을 크게 약화 시 킬 수 있다.info,wran,error 등 방법 은 색상 출력 을 구별 하지만 각자 의 직책 이 있 기 때문에 남용 하기 불편 합 니 다.자 바스 크 립 트 코드 로 그 를 착색 시 켜 로 그 를 더 큰 가 치 를 발휘 할 수 있 도록 확장 하 는 방법 이 필요 합 니 다.
이 기능 을 실현 하려 면 사실 매우 간단 하 다.console.log 문자열 대체 와 형식 설정 기능 을 사용 하면 됩 니 다.다음 형식 설명자 의 전체 목록:
설명자
출력
%s
값 을 문자열 로 포맷 합 니 다.
%i 혹은%d
값 을 정형 으로 포맷 하 다
%f
값 을 부동 소수점 값 으로 포맷 합 니 다.
%o
값 을 확장 가능 한 DOM 요소 로 포맷 합 니 다.Elements 패 널 에 표 시 된 것 처럼
%O
확장 가능 한 자 바스 크 립 트 대상 으로 값 포맷 하기
%c
두 번 째 매개 변수 가 지정 한 출력 문자열 에 CSS 스타일 규칙 적용
모든 기록 방법 에 전 달 된 첫 번 째 매개 변 수 는 하나 이상 의 형식 설명 자 를 포함 할 수 있 습 니 다.형식 설명 자 는%기호 와 뒤에 바짝 붙 어 있 는 알파벳 으로 구성 되 어 있 으 며,알파벳 지 시 는 값 의 형식 에 적용 된다.문자열 뒤의 매개 변 수 는 자리 표시 자 에 순서대로 적 용 됩 니 다.
console 의 더 많은 기능 과 용법 에 대해 참고 할 수 있 습 니 다콘 솔 사용|Google Developers.다음은 컬러 출력 로그 에 대한 간단 한 예제 입 니 다.

console.log(`%c     : %s`, 'color: #65c294', ':         ')
console.log(`%c     : %c%s`, 'color: #65c294', 'color: #1a1a1a', ':         ')

앞에서 언급 한 바 와 같이 비교적 큰 프로젝트 와 관련 되 었 을 때 로그 에서 코드 의 대체적인 흐름 을 나 타 낼 수 있 도록 서로 다른 모듈 로 그 를 대상 으로 서로 다른 색깔 로 구분 하여 표시 하 는 것 이 가장 좋다.이것 은 어느 정도 에 제 시 된 로그 의 이익 을 더욱 크게 할 수 있다.다음은 이에 대한 실천 방안 이다.

const _gLogColorObj = {
 moduleA: '#009ad6', //   
 moduleB: '#65c294' //    
}

const _gConsole = (theme, args) => {
 const regStr = `%c@λ~${theme.toLocaleUpperCase()}: ${_gGetMatchStr(args)}`
 const color = _gLogColorObj[theme]
 console.log(regStr, `color: ${color}`, ...args)
}

const _gRegMatchObj = {
 object: '%o',
 function: '%o',
 number: '%i',
 string: '%s',
 undefined: '%s',
 boolean: '%s'
}

const _gGetMatchStr = args => {
 const cMatchArr = []
 for (let key in args) {
 cMatchArr.push(_gRegMatchObj[typeof args[key]])
 }
 return cMatchArr.join(' ')
}

const $log = {
 moduleA: (...args) => {
 _gConsole('moduleA', args)
 },
 moduleB: (...args) => {
 _gConsole('moduleB', args)
 }
 //            ，       ； 
}

위의 코드 에 서 는 주로 표 구동 법 을 바탕 으로 디자인 된 모듈 이름(Eg:moduleA)과 정 해진 색 값 에 따라 JS 코드 로그 출력 을 컬러 화하 고 로그 가 있 는 모듈 을 표시 합 니 다.이렇게 하면 로그 출력 을 더욱 선명 하 게 할 수 있다.
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.