인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
String 객체 내장함수
문자열의 길이를 알려주는 함수이다.
var txt = "ABCDEFGHIJKLMN";
console.log(txt.length);
// 결과 : 14
//문자열이 몇 글자인지 알려주는 함수
문자열 안에 원하는 키워드가 있다면 어디에 있는지를 인덱스 번호로 알려주는 함수이다.
var str = "Please locate where 'locate'";
console.log(str.indexOf("locate"));
// 결과 : 7
//가장 먼저 발견된 locate가 시작되는 인덱스 번호를 알려주는 함수
//단, 인덱스 번호는 0부터 시작
var str = "Please locate where 'locate'";
console.log(str.indexOf("John"));
// 결과 : -1
//-1은 찾고자 하는 키워드가 문자열에 없다는 것을 의미함
<활용 예시>
if(str.indexOf("locate") > -1) {
console.log("locate문자 발견");
}
// 결과 : 'locate문자 발견'이 출력됨
if(str.indexOf("John") > -1) {
console.log("locate문자 발견");
}
// 결과 : 아무 것도 출력되지 않음(해당 키워드가 문자열에 없기 때문)
문자열 안에 원하는 키워드가 있다면 가장 마지막에 발견된 위치를 인덱스 번호로 알려주는 함수이다.
var str = "Please locate where 'locate'";
console.log(str.lastIndexOf("locate"));
// 결과 : 21
//마지막에 발견된 locate가 시작되는 인덱스 번호를 알려주는 함수
//단, 인덱스 번호는 0부터 시작
indexOf함수와 동일한 기능을 하는 함수이다.
var str = "Please locate where 'locate'";
console.log(str.search("locate"));
// 결과 : 7
문자열의 일부분을 잘라내서 보여주는 함수이다.
var str = "Apple, Banana, Kiwi";
console.log(str.slice(7, 13));
// 결과 : Banana
//7은 시작점을 의미하며, 13은 끝점을 의미한다.
//주의할 점은 끝점이 포함되지 않는다는 것이다.(끝점 바로 앞 글자까지 가져옴)
console.log(str.slice(7));
// 결과 : Banana, Kiwi
//끝점을 지정하지 않으면, 시작점부터 이후 모든 글자를 가져온다.
console.log(str.slice(-12));
// 결과 : Banana, Kiwi
//뒤에서부터 앞으로 12번째에 있는 글자(B)에서 시작하여,
//그 이후에 있는 모든 글자를 가져온다.
//전달인자가 -값이 되면 뒤에서부터 문자열의 인덱스 번호를 센다.
//단, 뒤에서부터 세면 0이 아닌 -1부터 시작한다.
console.log(str.slice(-1));
// 결과 : i
//뒤에서부터 앞으로 1번째에 있는 글자(i)에서 시작하여,
//그 이후에 있는 모든 글자를 가져온다.
console.log(str.slice(-12, -6));
// 결과 : Banana
//뒤에서부터 앞으로 12번째에 있는 글자(B)가 시작점이 되고,
//뒤에서부터 앞으로 6번째에 있는 글자(,)가 끝점이 되어,
//끝점의 바로 앞 글자까지 가져온다.
Slice 함수와 비슷한 기능을 하는 함수이다.
var str = "Apple, Banana, Kiwi";
console.log(str.substring(7, 13));
// 결과 : Banana
//Slice 함수와 동일한 결과
<활용 예시>
var birthday = "1997-05-27";
console.log(birthday.substring(0, birthday.indexOf("-")));
// 결과 : 1997
//생년월일 중 태어난 연도를 알고자 할 때 사용하며,
//시작점은 0, 끝점은 "-"가 첫번째로 나오는 위치(4)가 된다.
//결국 문자열의 인덱스 번호 0부터 4 바로 앞의 글자까지 가져오는 것이다.
console.log(birthday.slice(0, birthday.indexOf("-")));
// 결과 : 1997
//substring 함수는 정확하게 몇 글자를 가져와야 할지 모르는 경우에 사용하며,
//indexOf 함수를 함께 사용하면 편리하다.
//slice 함수의 경우도 동일한 원리로 사용 가능하다.
문자열 안에 특정 시작점부터 원하는 만큼의 글자 수를 가져오는 함수이다.
var str = "Apple, Banana, Kiwi";
console.log(str.substr(7, 6));
// 결과 : Banana
//7은 시작점을 의미하고, 뒤에 있는 전달인자는 시작점부터
//몇 글자를 가져올지를 결정하는 숫자이다.
<활용 예시>
var birthday = "970527";
console.log(birthday.substr(0,2));
// 결과 : 97
//생년월일 중 태어난 연도를 알고자 할 때 사용한다.
console.log(birthday.substr(2,2));
// 결과 : 05
//생년월일 중 태어난 달을 알고자 할 때 사용한다.
//즉, substr은 정확하게 몇 글자를 가져와야 할지 알고 있는 경우 사용한다.
문자열에서 특정 키워드를 다른 키워드로 바꾸고 싶을 때 사용하는 함수이다.
var str = "Please visit here!";
var str2 = str.replace("here", "there");
console.log(str2);
// 결과 : Please visit there!
//str.replace("here", "there");에서 앞의 파라미터는 바꾸고자 하는 키워드이고,
//뒤의 파라미터는 앞의 파라미터를 대체할 키워드이다.
<참고>
var str = "Please visit here here here!";
var str2 = str.replace("here", "there");
console.log(str2);
// 결과 : Please visit there here here!
//이 경우에 맨 앞의 here만 there로 바뀌고 나머지는 그대로 유지된다.
//만약 모든 here을 there로 바꾸기 위해서는 정규식을 사용해야 한다.
//정규식 사용 예시(추후에 더욱 자세히 다룰 예정)
var str = "Please visit here here here!";
var str2 = str.replace(/here/g, "there");
console.log(str2);
// 결과 : Please visit there there there
//정규식을 사용하면 모든 here가 there로 대체된다.
var str = "Please visit here Here here!";
var str2 = str.replace(/here/g, "there");
console.log(str2);
// 결과 : Please visit there Here there!
//하지만 HERE은 대문자이므로 바뀌지 않는 문제가 발생한다.
var str = "Please visit here Here here!";
var str2 = str.replace(/here/gi, "there");
console.log(str2);
// 결과 : Please visit there there there!
//위의 문제를 해결하기 위해서는 g대신 gi를 코드로 써야한다.
//이는 대소문자 구분 없이 모두 바꾸라는 의미이다.
모든 문자열을 대문자로 바꿔주는 함수이다.
var str = "Please visit here Here here!";
console.log(str.toUpperCase());
// 결과 : PLEASE VISIT HERE HERE HERE!
모든 문자열을 소문자로 바꿔주는 함수이다.
var str = "Please visit here Here here!";
console.log(str.toLowerCase());
// 결과 : please visit here Here here!
<참고 : 실무에서 uppercase, lowercase의 활용 예시>
만약 데이터베이스에서 어떤 문자열을 찾을 경우, 대·소문자가 구분되는 문자열의 경우에는
무조건 대문자 혹은 소문자로 전체 변경시키고 난 후에 해당 문자열을 데이터베이스에서 찾아야 한다.
그렇지 않으면, 데이터베이스에서 해당 문자열의 소문자는 찾아내지만 대문자는 찾아내지 못하는
문제가 발생할 수 있기 때문이다.
문자열을 서로 붙여주는 함수이다.
//일반적인 경우
var txt1 = "Hello";
var txt2 = "world";
var txt3 = txt1 + " " + txt2;
console.log(txt3);
// 결과 : Hello world
//두 문자를 붙여줄 때 위와 같은 방식을 쓰기도 하지만
//concat 함수를 사용할 수도 있다.
//concat 함수를 사용하는 경우
var txt1 = "Hello";
var txt2 = "world";
var txt4 = txt1.concat(txt2);
console.log(txt4);
// 결과 : Helloworld
//단, concat 함수를 사용하면 두 문자열을 공백없이 붙여준다.
var txt1 = "Hello";
var txt2 = "world";
var txt4 = txt1.concat(" ", txt2); //공백의 문자열을 파라미터로 추가
console.log(txt4);
// 결과 : Hello world
//concat() 함수는 무한대로 파라미터를 가질 수 있으며,
//앞에서부터 순서대로 파라미터들을 모두 붙여준다.
문자열에서 첫 번째 글자와 마지막 글자의 앞뒤로 존재하는 공백을 모두 없애주는 함수이다.
var str = " Hello world! ";
console.log(str);
// 결과 : " Hello world! " (공백 존재)
console.log(str.trim());
// 결과 : Hello world! (공백 존재X)
//데이터베이스에 정보를 조회할 경우, 공백 때문에 검색되지 않는 문제를 사전에 방지하고자
//먼저 공백을 제거하기 위해 사용하는 함수이다.
원하는 자릿수의 문자열로 바꿀 때 사용하는 함수이다.
var str = "5";
console.log(str.padStart(4,0));
// 결과 : 0005
//4자리의 문자열을 만든다. (단, 자리수는 앞으로 채움)
//앞의 파라미터는 몇 자리 문자열을 만들 것인지를 의미하고,
//뒤의 파라미터는 해당 자리수를 만들 때 앞자리를 어떤 것으로 채울지 의미하는 숫자이다.
원하는 자릿수의 문자열로 바꿀 때 사용하는 함수이다.
var str = "5";
console.log(str.padEnd(4,0));
// 결과 : 5000
//4자리의 문자열을 만든다. (단, 자리수는 뒤로 채움)
//앞의 파라미터는 몇 자리 문자열을 만들 것인지를 의미하고,
//뒤의 파라미터는 해당 자리수를 만들 때 뒷자리를 어떤 것으로 채울지 의미하는 숫자이다.
<참고>
만약 실무에서 어떤 제품 코드를 12자리로 관리한다고 할 경우, 강제적으로 12자리를 만들기 위해
해당 함수들을 사용한다 : 12 >>>000000000012 (padStart 함수 사용하여 자릿수 변경)
문자열에서 원하는 특정 글자 한 개를 가져올 때 사용하는 함수이다.
var str = "Hello world";
console.log(str.charAt(0));
// 결과 : H
console.log(str.charAt(2));
// 결과 : l
문자열을 특정 기호 혹은 글자 기준으로 분리하여 각각을 배열로 보여주는 함수이다.
var tags = "키보드,기계식,블루투스";
var arr = tags.split(","); //문자열을 분리하는 기준이 되는 기호
console.log(arr);
// 결과 :
//Array(3)
//0: "키보드"
//1: "기계식"
//2: "블루투스"
//length: 3
//[[Prototype]]: Array(0)
var birthday = "1997-06-14";
var arr2 = birthday.split("-"); //문자열을 분리하는 기준이 되는 기호
console.log(arr2);
// 결과 :
//Array(3)
//0: "1997"
//1: "06"
//2: "14"
//length: 3
//[[Prototype]]: Array(0)
댓글