[javascript] 문자열 내 특정 index 값 변경하기 (split, join 활용)

배경설명

• input type=radio 다건 선택 여부를 하나의 문자열로 표현하기
• 다건 선택 문자열 정의 : n 자리 이진수로 표현
  • ex) 6 자리
    • default : '000000'
    • 1 번째 옵션 선택 : '100000'
    • 1,3,6 번째 옵션 선택 : '101001'

해결방법

• 문자열 내 특정 index 값 변경 함수 생성
  • split (string) 과 join (array) 기능 활용
• input type=radio change 이벤트 바인딩 시, 위 함수 호출하여 전역변수 갱신

샘플함수

/*
 * 다건 선택 문자열 반환
 * @param {string} chgBfStr	변경전 문자열
 * @param {string} updtDigit 갱신한 자릿수 (1부터 시작)
 * @param {boolean} isChecked checked 여부
 * @returns {string} multiScltStr 다건선택 문자열
 */
function getMuliScltStr(chgBfStr, updtDigit, isChecked) {
	let splitArr = chgBfStr.split('');
  	splitArr[updtDigit - 1] = isChecked === true ? '1' : '0';
  
  	const multiScltStr = splitArr.join('');
  	return multiScltStr;
}

적용예시

// 초기값 선언
let multiScltStr = '000000';

// 1번째 옵션 선택
multiScltStr = getMuliScltStr(multiScltStr, 1, true);	// '100000'

// 3번째 옵션 선택
multiScltStr = getMuliScltStr(multiScltStr, 3, true);	// '101000'

// 6번째 옵션 선택
multiScltStr = getMuliScltStr(multiScltStr, 6, true);	// '101001'

// 6번째 옵션 해제
multiScltStr = getMuliScltStr(multiScltStr, 6, false);	// '101000'

효과

• 6개의 옵션을 요청 파라미터로 전달할 때, 각 옵션별로 6개 가 아닌 1개로 압축할 수 있다.
  • 송/수신 쪽에서 약속이 되어야 함!
  • ex) 항목 개수별 예시
    • 6개 항목 : A, B, C, D, E, F
    • 1개 항목 : '000000', '100000', '110000', ... '111111' (64개 경우의 수 모두 표현 가능)