WebJavaScript

191020_TIL(String in JS)

JavaScript

자바스크립트 문자열

자바스크립트 문자열 기본

자바스크립트의 기본 자료형인 String에는 널리 사용할 수 있는 다양한 문자열 함수가 있다.

문자열 접근

.charAt(index)

0부터 시작하는 인덱스를 입력 값으로 받고 문자열의 해당 인덱스 위치에 있는 문자를 반환한다.

1
'dog'.charAt(1); // 'o'

.substring(startIndex, endIndex)

지정된 인덱스 사이의 문자들을 반환한다.

startIndex에 위치한 문자는 포함하고 endIndex에 위치한 문자는 포함하지 않는다.

endIndex를 전달하지 않으면 startIndex부터 문자열의 끝까지 모든 문자 값들을 반환한다.

1
2
3
4
'YouTube'.substring(1,2); // 'o'
'YouTube'.substring(3,7); // 'Tube'

'YouTube'.substring(1); // 'ouTube'

문자열 비교

자바스크립트에서는 미만 연산자와 초과 연산자를 사용해 문자열을 비교할 수 있다. 문자열 비교 기능은 정렬 알고리즘에서 문자열을 비교할 때 매우 유용하다. 사전 편집순으로 대소를 비교한다.

1
2
3
4
5
6
7
8
9
10
11
12
var a = 'a';
var b = 'b';
console.log(a < b); // true

var a = 'add';
var b = 'b';

console.log(a < b); // true

var a = 'add';
var b = 'ab';
console.log(a < b); // false

문자열 검색

.indexOf(searchValue[, fromIndex])

  • 검색하고자 하는 문자열을 매개변수로 받는다.
  • 선택적으로 검색 시작 인덱스를 지정하는 매개변수도 받는다.
  • 문자열의 인덱스를 반환한다.
  • 일치하는 문자열을 발견하지 못한 경우 -1이 반환된다.
  • 대소문자를 구분한다.
1
2
3
4
5
'Red Dragon'.indexOf('Red');     // returns  0
'Red Dragon'.indexOf('RedScale'); // returns -1
'Red Dragon'.indexOf('Dragon', 0); // returns  4
'Red Dragon'.indexOf('Dragon', 4); // returns  4
'Red Dragon'.indexOf('', 9);      // returns  9

어떤 문자열 내에 특정 문자열이 존재하는지 확인하기 위해서는 .indexOf()가 -1을 반환하는 확인하면 된다.

1
2
3
4
5
function existsInString (stringValue, search) {
    return stringValue.indexOf(search) !== -1;
}
console.log(existsInString('red','r')); // true;
console.log(existsInString('red','b')); // false;

문자열 내에 특정 문자가 몇 번 등장하는지 세는 코드

1
2
3
4
5
6
7
8
9
var str = "He's my king from this day until his last day",
var count = 0,
var pos = str.indexOf('a');

while (pos !== -1) {
  count++;
  pos = str.indexOf('a', pos + 1);
}
console.log(count); // 3

startsWith(searchValue), endsWith(searchValue)

startsWith는 문자열이 특정 입력으로 시작하면 true를 반환하고 endsWith는 문자열이 특정 입력으로 끝나면 true를 반환한다.

1
2
'Red Dragon'.startsWith('Red'); // true
'Red Dragon'.endsWith('Dragon'); // true

문자열 분해

.split(separator)

하나의 매개변수(분리자)를 입력받아 문자열 배열을 생성한다.

1
2
var test1 = 'chicken,noodle,soup,broth';
test1.split(","); // ["chicken", "noodle", "soup", "broth"]

빈 분리자를 전달하면 문자열 내 모든 문자로 구성된 배열이 생성된다.

1
2
var test1 = 'chicken';
test1.split(""); // ["c", "h", "i", "c", "k", "e", "n"]

split 함수를 사용하면 문자열을 배열로 변환해 쉽게 항목들을 순회할 수 있다.

문자열 바꾸기

.replac(string, replaceString)

문자열 변수 내에 특정 문자열을 다른 문자열로 대체한다.

1
"Wizard of Oz".replace("Wizard","Witch"); // "Witch of Oz"

정규 표현식

  • 정규 표현식은 검색 패턴을 정의한 문자열들의 집합이다.
  • 자바스크립트에는 정규 표현식에 사용할 수 있는 기본 객체 RegExp가 포함된다.
  • RegExp의 생성자가 받는 매개변수에는 필수 매개변수인 정규 표현식과 선택 매개변수인 일치 관련 설정이 있다.

일치 관련 설정

  • i : 대소문자를 구분하지 않고 일치하는 문자열을 검색한다.
  • g: 전역적으로 일치하는 문자열을 검색한다.(멈추지 않고 모든 일치하는 문자열을 찾는다.)
  • m: 다중열 문자열에 대해서도 일치하는 문자열을 검색한다.

RegExp의 두 가지 함수

  • search() : 문자열 내에 일치하는 문자열을 찾는다. 일치하는 첫 번째 문자열을 반환한다.
  • mathc() : 문자열 내에 일치하는 문자열을 찾는다. 모든 일치하는 문자열을 반환한다.

String() 객체에있는 RegExp 객체를 인자로 받는 함수

  • exec() : 문자열 내에 일치하는 문자열을 찾는다. 일치하는 첫 번째 문자열을 반환한다.
  • test() : 문자열 내에 일치하는 문자열을 찾는다. true 또는 false를 반환한다.

기본 정규 표현식

  • ^ : 문자열/줄의 시작을 나타낸다.
  • \d : 모든 숫자를 찾는다.
  • [abc] : 괄호 내의 모든 문자를 찾는다.
  • [^abc] : 괄호 내의 문자를 제외한 모든 문자를 찾는다.
  • [0-9] : 괄호 내의 모든 숫자를 찾는다.
  • [^0-9] : 괄호 내의 숫자를 제외한 모든 숫자를 찾는다.
  • (x | y) : x 또는 y를 찾는다.
1
2
3
var str = "JavaScript DataStructures";
var n = str.search(/DataStructures/);
console.log(n); // 11

자주 사용하는 정규 표현식

사용자의 입력이 유효한지 확인할 때 매우 유용하다.

숫자를 포함하는 문자

/\d+/

1
2
3
4
5
var reg =  /\d+/;
reg.test("123"); // true
reg.test("33asd"); // true
reg.test("5asdasd"); // true
reg.test("asdasd"); // false

숫자만 포함하는 문자

/^\d+$/

1
2
3
4
var reg =  /^\d+$/;
reg.test("123"); // true
reg.test("123a"); // false
reg.test("11a22"); // false

부동소수점 문자

/^[0-9].[0-9][1-9]+$/

1
2
3
4
var reg = /^[0-9]*.[0-9]*[1-9]+$/;
reg.test("12"); // false
reg.test("12.2"); // true
reg.test("12.2.3"); // false

숫자와 알파벳만을 포함하는 문자

/[a-zA-Z0-9]/

1
2
3
4
5
6
var reg = /[a-zA-Z0-9]/;
reg.test("somethingELSE"); // true
reg.test("hello"); // true
reg.test("112a"); // true
reg.test("112"); // true
reg.test("^"); // false

질의 문자열

웹 URL은 대개 경로 찾기나 데이터베이스 질의 목적의 매개변수를 포함한다. 이러한 매개변수를 파싱할 때 정규 표현식은 유용하다.

1
2
3
4
5
6
7
8
9
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

인코딩

인코딩은 컴퓨터 과학 분야에서 효율적인 전송 혹은 저장을 위해 문자들을 특수 포맷으로 표현하는 포괄적인 개념이다. 모든 컴퓨터 파일은 특정 구조로 인코딩된다.

Base64 인코딩

btoa() 함수는 문자열로부터 Base64 인코딩된 ASCII 문자열을 생성한다. 문자열의 문자는 바이트로 취급된다. atob() 함수는 Base64 인코딩을 사용해 인코딩된 문자열을 디코딩한다.

1
2
3
4
5
6
//btoa('hello I love learning to computer program');
// alternatively:
Buffer.from('hello I love learning to computer program').toString('base64')

//atob('aGVsbG8gSSBsb3ZlIGxlYXJuaW5nIHRvIGNvbXB1dGVyIHByb2dyYW0');
Buffer.from('aGVsbG8gSSBsb3ZlIGxlYXJuaW5nIHRvIGNvbXB1dGVyIHByb2dyYW0', 'base64').toString()

문자열 단축

Bit.ly와 같은 단축 URL 생성 원리

  1. 데이터 베이스가 URL에 대해 정수 기반 고유 ID를 생성한다.
  2. 정수 ID는 문자열로 단축된다.

암호화

TLS는 서버와 클라이언트 간에 암호화된 연결을 수립하기 위한 표준 보안 기술이다. 브라우저는 대칭 키 암호화만을 사용한다.

  1. 서버는 브라우저에게 자신의 비대칭 공개 키를 전송한다.
  2. 브라우저는 현재 세션을 위한 대칭 키를 생성한다. 해당 대칭 키는 서버의 비대칭 공개 키로 암호화된다.
  3. 서버는 자신의 비밀 키로 브라우저의 세션을 복호화해 세션 키를 추출한다.
  4. 이제 두 시스템 모두 세션 키를 가지고 있고 세션 키를 사용해 자료를 안전하게 전송한다.

RSA 암호화

가장 널리 사용되는 공개 키 암호화 알고리즘

RSA는 큰 정수의 인수분해 난이도에 기반한 암호화 알고리즘이다.

메시지를 암호화하고 해독하는 과정에는 3단계가 존재한다.

  • 키 생성 : 공개 키(공유됨)와 비밀 키(비밀로 유지됨)가 생성된다. 생성된 키 생성 방법 역시 비밀이어야 한다.
  • 암호화 : 공개 키를 통해 비밀 메시지를 암호화 할 수 있다.
  • 복호화: 비밀 키로만 암호화된 메시지를 복호화 할 수 있다.
Share