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..

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

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

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

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

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 ..

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..

033_자바스크립트 지정 문자열 변환하기 [적용] 문자열을 다른 문자열로 바꾸고 싶을 때 문자열 내 불필요한 줄바꿈 코드를 로 바꾸고 싶을 때 빈칸을 제거하고 싶을 때 [문법] 메소드 의미 반환 대상문자열.replace(문자열1, 문자열2) 문자열1을 문자열2로 바꾸기 문자열 대상문자열.replace(정규표현, 문자열) 정규 표현으로 문자열 바꾸기 문자열 [내용] 문자열을 다른 문자열로 바꾸고 싶을 때 사용한다.다음의 샘플 코드를 확인해 보자. // image1.png를 image2.png로 바꿈 const imageName = 'image1.png'; imageName.replace('1.png', '2.png'); // image2.png // 문자열 내 줄바꿈 코드를 제거 const inputTex..

032_자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) [적용] 위치와 글자 수를 지정한 문자열을 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.substr(시작인덱스, [글자수*]) 지정 범위 내 문자열 추출 문자열 * 글자수는 생략 가능 [내용] substr()은 두 번째 인수에 추출하고 싶은 글자 수를 지정한다. 인덱스 위치와 글자 수를 지정하여 필요한 위치부터 원하는 길이만큼의 문자열을 추출한다. 샘플을 확인해 보자. // 인덱스 시작 위치를 4로 지정하여 6개의 문자를 추출 'JavaScript'.substr(4, 6); // Script 'JavaScript'.substr(4); // Script (글자수를 지정하지 않으면 지정글자 이후를 모두 추출하여 반환) [JavaScrip..

031_자바스크립트 문자열 다루기 (위치 지정하여 선택하기) [적용] 지정 범위 내의 문자열을 추출하여 사용하고 싶을 때 지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때 [문법] 메소드 의미 반환 문자열.slice(시작인덱스, [종료인덱스*]) 지정 범위 내 문자열 추출 문자열 문자열.substring(시작인덱스, [종료인덱스*]) 지정 범위 내 문자열 추출 문자열 * 종료 인덱스는 생략 가능하다 [내용] 지정한 문자열의 일부를 추출하고 싶을 때 slice(), substring()을 사용한다. 지정한 인덱스의 시작 지점부터 종료 지점까지 문자열을 추출하며, 종료 인덱스를 생각하면 범위는 문자열의 끝까지로 지정된다. 지정한 위치 이후의 문자열을 모두 추출하거나 시작과 종료 인덱스를 지정하여 추출할 ..