📍 0. 도입

화면 구현 중 문자열 길이에 따른 동적 width지정을 해야했다.
length로 구현하는 방법은 한글, 영소문자, 특수문자를 구분하지 못하여
정확한 width 계산에 한계가 있다.

다음 방법은 문자열을 UTF-16 코드를 이용하여 문자열의 Byte를 구해
width를 계산할 수 있는 방법이다.

📍 1. 시작

📌 다음 네가지 메소드를 알아야한다. MDN에 설명이 매우 자세하게 나와있다.

• slice : MDN - slice
• map : MDN - map
• charCodeAt : MDN - charCodeAt
• reduce : MDN - reduce

📌 Shift 연산에 대해서 알아야한다.

• left shift(<<)
• right shift(>>)

shift연산에 대해 쉽고 이해하기 쉽게 설명해놓으셨다.
몽구스 프로그래밍 - https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=yuyyulee&logNo=221114544260

그러니까 원리는, 문자열을 UTF-16코드를 나타내는 0~65535 사이의 정수를 반환받아서
누산기에 right shift연산을 통해 현재값의 byte를 더해 반환받는것인데,
무슨원리로 byte를 계산하는지 궁금해서 이것저것 알아보았다.

📌 코드

ES6
function getByte(str) {
  return str
    .split('')
    .map(s => s.charCodeAt(0))
    .reduce((prev, c) => (prev + ((c === 10) ? 2 : ((c >> 7) ? 2 : 1))), 0);
}

ES6 이전
function getStringLength(str) {
  return str
  		.split('')
  		.map(function(s){
		  		return s.charCodeAt(0)
			})
		.reduce(function(prev, cur){
			return prev + ((cur === 10) ? 2 : ((cur >> 7) ? 2 : 1));
		}, 0);
}