# 자바스크립트 학습
# 문자열 추출
## substring()
| 구분 |
데이터(값) |
| data |
반환 대상 |
| 파라미터 |
시작 인덱스 |
| 끝 인덱스 |
| 반환 |
결과 |
- 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.
var value = "01234567";
log(value.substring(2, 5)); // 2번 인덱스 ~ 5번 인덱스 직전까지 반환
=>
234
- 두 번째 파라미터를 작성하지 않으면, 반환 대상의 끝까지 반환한다. (파라미터를 모두 작성하지 않으면 처음 ~ 끝까지 모두 반환한다.
var value = "01234567";
log(value.substring(5));
log(value.substring());
=>
567
01234567
var value = "01234567";
log(value.substring(5, 20));
=>
567
두 번째 파라미터 값이 전체 length 보다 크면, 전체 문자열 length 사용
따라서 시작 인덱스 ~ 끝까지 반환한다.
var value = "01234567";
log(value.substring(-7, 2)); // 파라미터 값이 '음수'이면 0으로 간주한다.
log(value.substring(5, 1)); // 첫 번째 파라미터의 값이 두 번째보다 크면 파라미터 값을 바꿔서 처리
// value.substring(1, 5)
log(value.substring(5, "A")); // NaN는 0으로 간주한다.
=>
01
1234
01234
## substr()
| 구분 |
데이터(값) |
| data |
반환 대상 |
| 파라미터 |
시작 인덱스 |
| 반환할 문자 수 |
| 반환 |
결과 |
- 파라미터의 시작 인덱스부터 지정한 문자의 수를 반환한다.
var value = "01234567";
log(value.substr(0, 3)); // 0번 인덱스부터 3개 반환
=>
012
- 첫 번째 파라미터 값이 '음수'일 경우 length에서 파라미터 값을 더해 시작 인덱스로 사용한다.
var value = "01234567";
log(value.substr(-3, 3));
=>
567
- 두 번째 파라미터를 작성하지 않으면 양수 무한대로 간주한다.
var value = "01234567";
log(value.substr(4));
log(value.substr());
=>
4567
01234567
## slice()
| 구분 |
데이터(값) |
| data |
반환 대상 |
| 파라미터 |
시작 인덱스 |
| 끝 인덱스 |
| 반환 |
결과 |
- 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.
var value = "01234567";
log(value.slice(1, 4)); // 1번 인덱스 부터 4번 인덱스 직전까지
log(value.slice(false, 4)); // false, undefined, null, 빈 문자열은 0으로 간주한다.
=>
123
0123
- 첫 번째 파라미터 값을 작성하지 않거나, NaN이면 0으로 간주한다.
var value = "01234567";
log(value.slice("A"));
log(value.slice());
=>
01234567
01234567
- 두 번째 파라미터를 작성하지 안흥면 length를 사용한다.
var value = "01234567";
log(value.slice(5));
log(value.slice(5, 3));
=>
567
""
- 값이 '음수'일 경우 length에 더해서 사용한다.
var value = "01234567";
log(value.slice(4, -2));
log(value.slice(-5, -2));
log(value.slice(-2, -5));
=>
45
345
""
# 정규 표현식을 사용하는 함수
## match()
| 구분 |
데이터(값) |
| data |
매치 대상 |
| 파라미터 |
정규표현식, 문자열 |
| 반환 |
[매치 결과] |
- 정규 표현식이란 문자열을 패턴으로 매치한다. (패턴(pattern)의 형태 : ^, $, *, + 등)
- 매치 결과를 배열로 반환한다.
- 매치 대상에 정규 표현식의 패턴을 적용하여 매치하고 매치 결과를 반환한다.
var value = "Sports";
log(value.match(/s/)); // /s/는 정규 표현식으로 소문자 s를 매치 > 배열로 반환
log(value.match("spo")); // 매치 되지 않으므로 null 반환
=>
[s]
null
- 문자열 작성 가능, 엔진이 정규 표현식으로 변환하여 매치한다.
## replace()
| 구분 |
데이터(값) |
| data |
치환 대상 |
| 파라미터 |
정규표현식, 문자열 |
| 대체할 값, 함수 |
| 반환 |
치환 결과 |
- 매치 결과를 파라미터에 작성한 값으로 대체하여 반환한다.
- 두 번째 파라미터에 함수를 작성하면 먼저 함수를 실행하고 함수에서 반환한 값으로 대체한다.
var value = "abcabc";
log(value.replace("a", "바꿈")); // 첫 문자가 매치되면 바꿈
log(value.replace(/a/, "바꿈")); // /a/는 처음 하나만 바꿈
function change() {
return "함수";
};
log(value.replace(/a/, change());
=>
바꿈bcabc
바꿈bcabc
함수bcabc
## search()
| 구분 |
데이터(값) |
| data |
검색 대상 |
| 파라미터 |
정규표현식, 문자열 |
| 반환 |
매치된 인덱스 |
- 검색 대상을 정규 표현식으로 검색하고, 처음 매치된 첫 번째 인덱스를 반환한다.
- 매치되지 않으면 -1을 반환한다.
var value = "cbacba";
log(value.search(/a/));
log(value.search("K"));
=>
2
-1
## split()
| 구분 |
데이터(값) |
| data |
분리 대상 |
| 파라미터 |
분리자: 정규 표현식, 문자열 |
| 반환 수 |
| 반환 |
결과 |
- 분리 대상을 분리자로 분리하여 배열로 반환한다.
log("12_34_56".split("_")); // "_"를 분리자로 사용
=>
[12, 34, 56]
var value = "123";
log(value.split("")); // "" (빈문자열) 작성 시 문자를 하나씩 반환
log(value.split()); // 분리자를 작성하지 않으면, 원본을 배열로 반환
=>
[1, 2, 3]
[123]
"" 과 파라미터를 작성하지 않은 것은 다른것이다.
var value = "12_34_56_78";
log(value.split("_", 3)); // "_"로 분리 후 3개만 반환
value = "123";
log(value.split("A")); // 매치되지 분리자가 없는 경우, 분리 대상 전체를 배열로 반환
=>
[12, 34, 56]
[123]
# Unicode 관련 함수
## charCodeAt()
| 구분 |
데이터(값) |
| data |
반환 대상 |
| 파라미터 |
반환 기준 인덱스(index) |
| 반환 |
인덱스 번째 문자 |
- 인덱스 번째의 문자를 유니코드의 코드 포인트 값으로 변환하여 반환한다.
- 인덱스가 문자의 길이보다 크면 NaN을 반환한다.
var value = "1Aa가";
for ( var k = 0; k < value.length; k++ ) { // 4번 반복
log(value.charCodeAt(k));
};
log(value.charCodeAt(12));
=>
49 // 0번째인 1을 유니코드의 코드 포인트 값인 49 반환
65 // A는 65
97 // a는 97
44032 // 가 44032
NaN // 12번째 인덱스는 존재하지 않으므로 NaN
## fromCharcode(0
| 구분 |
데이터(값) |
| data |
String 오브젝트 |
| 파라미터 |
유니코드, 다수 작성 가능 |
| 반환 |
반환한 문자 |
- 파라미터의 유니코드를 문자열로 변환하고 연결하여 반환한다.
- 작성하지 않으면 빈 문자열을 반환한다.
- data 위치에 String 오브젝트를 작성 변환 대상 값을 작성하지 않는다.
- String.fromCharCode() 형태
log(String.fromCharCode(49, 65, 97, 44032));
=>
1Aa가
## localeCompare()
| 구분 |
데이터(값) |
| data |
비교 대상 |
| 파라미터 |
비교할 값 |
| 반환 |
1(앞), 0(같음), -1(뒤) |
- 값을 비교하여 위치를 나타내는 값으로 반환한다.
- 위치 값 : 1(앞), 0(같음), -1(뒤)
- 이때 Unicode의 코드 포인트 값으로 비교한다.
var value = "나";
log(value.localeCompare("가")); // "가"는 "나"보다 앞에 존재 = 1
log(value.localeCompare("나")); // "나"의 코드 포인트 값 동일 = 0
log(value.localeCompare("다")); // "다"는 "나"보다 뒤에 존재 = -1
=>
1
0
-1