[JS]   공백 적용 안될 때 문자열 안에 공백 주기

우리가 보통 문자열에 공백을 주고 싶을 때,   를 많이 이용한다.

하지만 종종   가 적용이 안될 때가 있는데, 그럴 경우 어떻게 문자열 안에 공백을 주어야하는지 알아보자!

 

  는 웹페이지에서 공백을 주기위해 사용하는 특수문자로, HTML이 이것을 공백으로 읽어 공백을 준다.

하지만 string 문자열 안에 공백을 주고 싶을 경우 , 예를 들어

 const content = [
    { color: 'var(--main-blue)', text: 'IT주' },
    { color: 'var(--type-black)', text: '와' },
    { color: 'var(--main-blue)', text: '첨단 기술주' },
    { color: 'var(--type-black)', text: '의 비중이 가장 크네요' }
 ]

이런 배열이 있다고 할 때 아래처럼 문자 '와' 그리고 '첨단 기술주' 사이에 공백을 주어야한다.

 

근데 이럴경우 '와  ' 이렇게 해버리면  도 그냥 문자로 인식되어

이렇게 되어버린다!

 

이럴 경우 특수문자가 아닌 공백 유니코드 \u00A0 를 써주어야한다!

유니코드는 문자 인코딩 표준으로, 텍스트 문자와 이진코드를 대응해주는 것을 말한다

공백 유니코드는 \u00A0 로, 

 const content = [
    { color: 'var(--main-blue)', text: 'IT주' },
    { color: 'var(--type-black)', text: '와 \u00A0' },
    { color: 'var(--main-blue)', text: '첨단 기술주' },
    { color: 'var(--type-black)', text: '의 비중이 가장 크네요' }
 ]

 

이렇게 작성해주어야 문자 사이에 공백을 줄 수 있다