자바스크립트 문자열 기본
문자열 접근, 비교, 분해, 검색에 대해 배울 것이고 문자열 인코딩, 디코딩, 암호화ㅡ 복호화도 알아볼 것
문자열 접근 charAt()
문자열에 접근할 땐 charAt()을 사용함
'dog'.charAt(1); // "o"를 반환
'YouTube'.substring(3, 7) // 'tube'를 반환만약 두 번째 매개변수를 전달하지 않으면 지정된 시작 위치부터 끝까지의 모든 문자값을 반환
return 'YouTube'.substring(1); // 'outube'를 반환문자열 비교 >, <
당연하게 자바스크립트는 미만 연산자와 초과 연산자를 사용해 이를 쉽게 수행 가능
var a = 'a';
var b = 'b';
console.log(a < b); // true만약 여기에서 다른 길이의 두 문자열을 비교한다면 문자열의 시작부터 비교하기 시작하여 더 짧은 길이의 문자열 길이만큼까지만 비교함
var a = 'add';
var b = 'b';
console.log(a < b); // true (b가 1자리니까 1개만 비교)
만약 아래와 같다면 ab의 길이인 2개만 비교 ad와 ab
d가 더 값이 크므로 false를 출력
var a = 'add';
var b = 'ab';
console.log(a < b); // false문자열 검색 .indexOf
특정 문자열을 찾기 위해선 .indexOf(찾을값, [검색시작인덱스])을 사용하면 됨
일치하는 문자열의 위치를 반환함, 만약 일치하는 문자열을 발견하지 못한 경우 -1이 반환됨
indexOf 함수는 대소문자를 구분한다는 점에 유의하자
'Red Dragon'.indexOf('Red'); // 0을 반환
'Red Dragon'.indexOf('RedScale'); // -1 반환
'Red Dragon'.indexOf('Dragon', 0); // 4를 반환
'Red Dragon'.indexOf('Dragon', 4); // 4를 반환간단한 문자열 확인 함수
function existsInString(stringValue, target) {
// -1 즉, 못 찾은 거랑 다르냐
// 찾았으면 0 (인덱스위치)가 들어가니 같지 않으므로 true, 못 찾았으면 -1이 들어가 같으므로 false
return stringValue.indexOf(target) !== -1;
}
console.log(existsInString('red', 'r'); // 'true'
console.log(existsInString('red', 'b'); // 'false'특정 문자열의 등장 횟수를 세는 방법
var str = 'He's my king from this day until his last day';
var count = 0;
var pos = str.indexOf('a');
while (pos !== -1) {
// 찾았을 때 인덱스값과 -1은 같지 않으므로 while문이 실행
count++;
// 값 올리고 다음 문자로 넘어감
pos = str.indexOf('a', pos + 1);
}
console.log(count); // '3'을 출력또한 startsWith를 통해 문자열이 특정 입력으로 시작하면 true를 반환하고 endsWith는 문자열이 특정 입력으로 끝나면 true를 반환
'Red Dragon'.startsWith('Red'); // true를 반환
'Red Dragon'.endsWith('Dragon'); // true를 반환
'Red Dragon'.startsWith('Dragon'); // false를 반환문자열 분해 .split()
.split(구분자 (분리자))를 통하여 구분 가능
빈 분리자를 전달하면 문자열 내 모든 문자로 구성된 배열이 생성
var test1 = 'chicken'
test1.split(""); // ["c", "h", "i", "c", "k", "e", "n"]이것은 문자열이 항목들의 나열로 구성될 때 유용
split 함수를 사용하면 문자열을 배열로 변환해 쉽게 항목들을 순회할 수 있음
문자열 바꾸기 .replace
.replace(string, replaceString)은 문자열 변수 내에 특정 문자열을 다른 문자열로 대체
'Wizard of Oz'.replace("Wizard", "Witch"); // Witch of Oz정규표현식
자바스크립트 개발자로서 정규표현식의 기본을 아는 것은 매우 중요
기본 객체 RegExp를 사용한다
RegExp의 생성자가 받는 매개변수에는 필수 매개변수인 정규 표현식과 선택 매개변수인 일치 관련 설정이 있음
일치 관련 설정 매개변수의 세부 내용
- i : 대소문자를 구분하지 않고 일치하는 문자열을 검색
- g : 전역적으로 일치하는 문자열을 검색 (일치하는 문자열을 처음 발견한 이후 멈추는 대신 모든 일치하는 문자열을 찾음)
- m : 다중열 문자열에 대해서도 일치하는 문자열을 검색
RegExp의 두 가지 함수
search() : 문자열 내에 일치하는 문자열을 찾아 인덱스를 반환
match() : 일치하는 문자열을 찾고 모든 일치하는 문자열을 반환
자바스크립트의 String 객체에는 정규 표현식과 관련된 다음 두 가지 함수가 있는데 두 함수는 RegExp 객체를 인자로 받음
exec() : 문자열 내에 일치하는 문자열을 찾고 일치하는 첫 번쨰 문자열을 반환
text() : 문자열 내에 일치하는 문자열을 찾아 true, false를 반환
기본 정규 표현식
기본 정규 표현식의 규칙
- ^ : 문자열/줄의 시작
- ＼d : 모든 숫자를 찾음
- [abc] : 괄호내 모든 문자를 찾음
- [^abc] : 괄호 내의 문자들을 제외한 모든 문자를 찾음
- [0-9] : 괄호 내의 모든 숫자를 찾음
- [^0-9] : 괄호 내의 숫자들을 제외한 모든 숫자를 찾음
- ( x | y ) : x또는 y를 찾음
다음 코드는 인덱스 11을 반환 이는 문자 D의 인덱스이고 정규 표현식의 패턴과 일치하는 문자열의 첫번째 문자
var str = 'JavaScript DataStructures';
var n = str.search(/DataStructures/);
console.log(n); // 11을 출력자주 표현하는 정규 표현식
정규표현식은 사용자의 입력이 유효한지 확인할 때 매우 유용
입력 확인의 한 가지 흔한 유형으로 입력이 숫자 문자들을 지녔는지 검증
개발자들이 자주 사용하는 5가지 정규표현식
숫자를 포함하는 문자
/ ＼d+ /
var reg = /\d+/;
reg.test('123'); // true
reg.test('33asd'); // true
reg.test('5szsdzs'); // true
reg.test('asdasd'); // false숫자만 포함하는 문자
/ ^＼d+$ /
var reg = / ^＼d+$ /;
reg.test('123'); // true
reg.test('33asd'); // false
reg.test('asdasd'); // false부동소수점 문자
/^[0-9]*.[0-9]*[1-9]+$/
var reg = /^[0-9]\*.[0-9]*[1-9]+$/;
reg.test('12'); // false
reg.test('12.2'); // true숫자와 알파벳만을 포함하는 문자
/[a-zA-Z0-9]/
var reg = /[a-zA-Z0-9]/;
reg.test('somTHING'); // true
reg.test('hello33'); // true
reg.test('HI^^'); // false질의 문자열
/([^?=&]+)(=([^&]*))/
웹 애플리케이션에서 웹 URL은 대개 경로 찾기나 데이터 베이스 질의 목적의 매개변수를 포함
예를 들어 http://your.domain/product.aspx?category=4&product_id=2140&query=lcd+tv 라는 Url은 다음과 같은백엔드 SQL에 대응될 수 있음
SELECT LCD, TV FROM database WHERE Category = 4 AND Product_id=2140;
이러한 매개변수를 파싱하기 위해 정규표현식은 매우 유용
var uri = http://your.domain/product.aspx?category=4&product_id=2140&query=lcd+tv ;
var queryString = {};
uri.replace(
new RegExp ("([^?=&]+)(=([^&]*))?", "g"),
function ($0, $1, $2, $3) { queryString[$1] = $3; }
);
console.log("ID : " + queryString['product_id']); // ID : 2140
console.log("Name : " + queryString['product_name']); // Name : undefined
console.log("Category : " + queryString['category']); // Category : 4