[JavaScript] 자바스크립트 문자열 디코드(Decode) 하기

043_자바스크립트 문자열 디코드(Decode) 하기 [적용] 인코딩된 URI 문자열을 디코딩하고 싶을 때 [문법] 메소드 의미 반환 decodeURI(문자열) 문자열을 디코딩 문자열 decodeURIComponent(문자열) 문자열을 디코딩 문자열 [내용] 인코딩된 문자의 복원은 디코딩이 필요하다. (예- '%EA%B0%80'을 디코딩하면 '가'로 변환된다.) 디코딩은 decodeURI()와 docodeURICompoment()를 사용한다. encodeURI()는 decodeURI()를 encodeURIComponent()는 decodeURIComponent()를 사용하여 디코딩한다. decodeURI('http://example.com/%EA%B7%80%EC%97%AC%EC%9A%B4%20%EA%B3..

2022.05.24

[JavaScript] 자바스크립트 문자열 URI 이스케이프(Escape) 처리하기

043_자바스크립트 문자열 URI 이스케이프(Escape) 처리하기 [적용] URI의 한글을 인코딩 할 때 SNS의 한글을 인코딩 후 URL로 변환하고 싶을 때 [문법] 메소드 의미 반환 encodeURI(문자열) 문자열을 인코딩 문자열 encodeURIComponent(문자열) 문자열을 인코딩 문자열 [내용] URI에 한글이 포함되면 그대로 사용할 수 없기 때문에 인코딩이 필요하다. (예- '가'를 인코딩하면 '%EA%B0%80'로 변환된다.) 인코딩을 위한 메소드는 두 종류가 있으며, 대상이 되는 문자가 각각 다르다. encodeURI()와 encodeURIComponent()는 문자열 인코딩을 위한 메스드로 숫자, -, _, ., !, ~, *, ', (,)는 이스케이프(Escape) 처리되어 인코..

2022.05.24

[JavaScript] 자바스크립트 문자열 길이 맞추기

041_자바스크립트 문자열 길이 맞추기 [적용] 10 미만의 숫자 앞에 0을 붙여 두 자리 형식을 만들고 싶을 때 [문법] 메소드 의미 반환 문자열.padStart(전체길아, [추가문자열*] 문자열 시작 부분에 문자열 추가 문자열 문자열.padEnd(전체길이, [추가문자열*]) 문자열 끝 부분에 문자열 추가 문자열 * 생략 가능 [내용] padStart(), padEnd() 는 문자열이 지정한 길이가 될 때까지 작업을 반복한다. '5'.padStart(2, '0'); // 05 'ff'padEnd(6, '0'); // ff0000 지정한 길이가 실제 문자열보다 짧은 경우 문자열 변환은 이루어지지 않는다. 인수에 추가 문자열을 생략하면 공백이 입력된다. '123'.padStart(3, '0'); // 12..

2022.05.24

[JavaScript] 자바스크립트 소수점 자리수 지정하기

040_자바스크립트 소수점 자리수 지정하기 [적용] 숫자 3.14159265를 문자열 '3.14'로 변환하고 싶을 때 숫자 10을 문자열 '10.00'으로 변환하고 싶을 때 [문법] 메소드 의미 반환 숫자값.toFixed([자리수*]) 소수점 이하 자리수 지정 문자열 숫자값.toPrecision([자리수*]) 자리수 지정 정밀도 반환 문자열 * 생략시 0 [내용] toFixed()는 소수점의 자릿수 지정이 가능하며, 소수점 이하는 지정된 자릿수 변환 후 문자열로 반환한다. (0.33333).toFixed(2); // 0.33(문자열) 소수점 이하의 자리수가 줄어들 경우 값을 근사치로 변환한다. (123.5678).toFixed(1); // 123.6(근사치로 변환) 소수점 이하의 자리수가 늘어날 경우 0..

2022.05.24

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

039_자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 떄 [문법] 메소드 의미 반환 /패턴/.test(문자열) 문자열과 패턴의 일치 여부 확인 진리값 [내용] 정규 표현의 test() 메소드를 사용해 문자열과 패턴의 일치 여부를 확인한다. /J/.test('JavaScript'); // 'J'가 'JavaScript'에 포함되어 있는지 여부. true /^iP/.test(iPhone'); // 'iPhone'의 시작 문자가 'iP'인지 여부. true /\d/.test('래시피'); // '래시피' 문자열 내 숫자 포함 여부. false /Java.*/.test('JavaScript'); // 'Jav' 다음의 문자 'a'가 0회 이상 ..

2022.05.24

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

038_자바스크립트 문자열 다루기 (정규 표현식 사용하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 때 많은 문자열을 패턴에 따라 일괄적으로 변환하고 싶을 때 [내용] 정규 표현을 사용하면 문자열의 변환과 검색이 더욱 간편하다. 예를 들어 접속한 브라우저가 iOS인지의 여부를 확인하고 싶을 때 유저 에이전트를 통해 iPhone/iPod/iPad의 포함 여부를 확인할 수 있다. 정규 표현을 사용한 코드와 사용하지 않은 코드를 비교해 보자. // 정규 표현을 사용한 코드 if (/iPhone|iPod|iPad/.test(navigator.userAgent)) { alert('접속한 브라우저는 iOS입니다.'); } // 정규 표현을 사용하지 않은 코드 if ( navigator.userAgent.in..

2022.05.24

[JavsScript] 자바스크립트 문자열과 식 함께 다루기

037_자바스크립트 문자열과 식 함께 다루기 [적용] 여러 문자열을 다루고 싶을 때 문자열 내 변수를 다루고 싶을 때 [문법] 구문 의미 문자열 + 문자열 + ... 문자열 결합 `${문자열1}${문자열2}${문자열3} 문자열 결합, 변수의 이용 [내용] 자바스크립트에서는 + 연산자를 문자열, 변수와 함께 사용할 수 있다. const userName = '고양이'; const tag = '' + '안녕하세요' + userName + '님' + ''; 문자열과 변수를 추가할 때마다 매번 + 연산자를 사용하기는 번거로운 데다, 코드의 가독성도 떨어진다. 템플릿 문자열 ``을 사용해 이 문제를 해결할 수 있다. 템플릿 문자열은 여러 행의 문자열을 다루거나 문자열 내부에 식을 삽입할 수 있다. const use..

2022.05.20

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

036_자바스크립트 문자열의 대소문자 변환하기 [적용] 소무자를 대문자로 변환하고 싶을 때 서버에서 반환된 대문자 데이터를 소문자로 변환하고 싶을 때 [문법] 메소드 의미 반환 문자열.toLowerCase() 문자열을 소문자로 변환 문자열 문자열.toUpperCase() 문자열을 대문자로 변환 문자열 [내용] toLowerCase()는 대문자를 소문자로, toUpperCase()는 소문자를 대문자로 변환한다 'TEST'.toLowerCase(); // 결과: 'test' 'john smith'.toUpperCase(); // 결과: 'JOHN SMITH' [예시] 어떤 값의 대소문자 여부를 확신할 수 없는 경우 위의 메소드를 유용하게 사용할 수 있다. 대소문자에 상관없이 입력폼에 특정 단어를 입력하면 알..

2022.05.20

[JavaScript] 자바스크립트 문자열 합치기

035_자바스크립트 문자열 합치기 [적용] 따로 입력받은 성과 이름을 결합하여 문자열을 만들고 싶을 때 폴더명과 파일명을 결합하여 파일 주소를 문자열로 만들고 싶을 때 [문법] 구문 의미 문자열1 + 문자열2 + 문자열3 + ... 문자열1에 문자열2와 문자열3을 결합 `${문자열1}${문자열2}${문자열3}` 문자열1, 2, 3을 결합 [내용] 대입 연산자 +를 사용하여 문자열을 결합한다. const country = '대한민국'; const states = '서울'; console.log(county + states); // 결과: 대한민국서울 템플릿 문자열(Template String)인 ` `을 사용해서도 문자열 결합이 가능하다. const country = '대한민국'; const states ..

2022.05.20

[JavaScript] 자바스크립트 문자열 나누기

034_자바스크립트 문자열 나누기 [적용] URL의 해시(Hash) 데이터르르 가져올 때 공백을 기준으로 문자열을 나누고 싶을 때 [문법] 메소드 의미 반환 문자열.split([기준문자*], [최대분할수*]) 지정 범위 내 문자열 반환 문자열 문자열.split([정규표현*], [최대분할수*]) 지정 범위 내 문자열 반환 문자열 * 생략 가능 [내용] split()는 첫 번째 인수로 구분된 배열을 반환한다. const myUrl = 'http://example.com/?id=123456$name=Lion&age=28'; myUrl.split('&'); // ["http://example.com/?id=123456", "name=Lion", "age=28"] myUrl.split(/&|\?/); // ["h..

2022.05.19