문자열
- 모든 글자의 나열 . 작은 따옴표(')나 큰 따옴표(")를 사용하여 문자열을 구분
- 공백문자 : 탭문자(\t), Carrige return(\r\n), 줄바꿈return(\n)
- 자동완성 기능. 날짜를 나타내는 숫자를 문자열로 변경
- 문자열( string ), 문자 하나( character, char )
- index로 접근을 가능하지만 쓸수는 없음 (read-only). 문자열을 새로 할당하지 않는한 바뀌지 않음.
var str ='CodeStates'
cosole.log(str[0]); //'C'
cosole.log(str[10]); //undefined
str[0]='G'
console.log(str); // 'CodeStates'- +연산자를 쓸 수 있음. string 타입과 다른 타입사이에 +연산자 쓰면 string타입으로 변환
var str1='Code';
var str2="States";
var str3 = '1';
console.log(str1+str2); //'CodeStates'
console.log(str3+7); //'17'
'1'+true // '1true'
'1'+5 //'15'
'1'+[1,2,3] //'11,2,3'문자열의 속성과 메소드를 이용해 원하는 형태로 만들기.
string의 모든 매소드는 IMMUTABLE : 원본은 변하지 않는다.
- 문자열의 length라는 속성을 활용해 길이를 확인.
str.length
var str= 'CodeStates';
console.log(str.length); //10- 문자열의 글자 하나하나에 접근.
str[ index ]
- index는 0 부터 시작
- 문자열 중 원하는 문자의 index를 찾기.
str.indexOf( searchValue )
- 앞에서 부터 찾음.
- arguments : searchValue
- return value : 처음으로 일치하는 index, 찾고자하는 문자열없으면 -1 출력
str.lastIndexOf( searchValue )
- 뒤에서 부터 찾음.
str.indexOf( searchValue ) , str.lastIndexOf( searchValue ) 는 str.includes( searchValue )기능 포함한다고 볼 수 있음.
'Blue Whale'.indexOf('Blue'); //0
'Blue Whale'.indexOf('blue'); //-1
'Blue Whale'.indexOf('Whale'); //5
'Blue WhaleWhale'.indexOf('Whale'); //5
'Blue WhaleWhale'.lastIndexOf('Whale'); //10- 문자열 중 원하는 문자의 포함 여부 확인.
str.includes( searchValue )
- arguments : searchValue
- return value : boolean값 출력. true, false
- 문자열 합치기.
word1 + " " + word2
str1.concat(str2,str3,num...) // str1+str2+str3+num => string타입으로 출력
- 문자열 -> 배열 : 문자열을 기준에 따라 구분하여 배열로 바꿈.
str.split( seperator )
- csv(comma seperate value)형식 처리시 유용
- arguments : seperator . 분리 기준이 될 문자열
- return value : 분리된 문자열이 포함된 배열
var str = 'Hello from the other side';
console.log(str.split(' ')); // ['Hello', 'from', 'the', 'other', 'side']
csv.split('\n') // 줄바꿈(return)으로 분리
lines[0].split(',') // 0번째 줄을 ,으로 분리- 배열 -> 문자열 : 배열을 기준에 따라 문자열로 바꿈.
str.split( seperator ).join(' ')
: 배열의 요소 사이에 띄어쓰기 (' ') 넣어 다시 문자열로 바꿈.
- 문자열을 원하는 만큼만 선택. 문자열의 중간만 가져오고 싶을 때.
str.substring( start ●, end ○ )
str.substr( start ) // 문자열의 index값이 start인 곳부터 끝까지.- arguments : start(시작index), end(끝index)
- return value : 시작index과 끝 index사이의 문자열
str.slice( start ●, end ○ )
- 배열, 문자열을 원하는 만큼만 선택.
var str = 'abcdefghij';
console.log(str.substring(0,3)); //'abc'
console.log(str.substring(3,0)); //'abc' 자동으로 작은숫자가 start가 된다.
console.log(str.substring(1,4)); //'abcd'
console.log(str.substring(-1,4)); //'abcd', 음수는 0으로 취급
console.log(str.substring(0,20)); //'abcdefghij' , end가 index 범위 초과하면 끝까지만 출력.
console.log(str.substr(0,3)); //'abc'
console.log(str.slice(0,3)); //'abc'- 문자의 대,소문자 변환.
str.toUpperCase()
str.toLowerCase()- arguments : 없음
- return value : 대,소문자로 변환된 문자열
- 문자열 양 끝의 공백제거
str.trim()
const greeting = ' Hello world! ';
console.log(greeting);
// expected output: " Hello world! ";
console.log(greeting.trim());
// expected output: "Hello world!"11. Javascript에서 문자열을 숫자로 변환하는 방법 3가지
- parseInt(문자열) 함수 사용
document.writeln(parseInt("10")); // 10 document.writeln(parseInt("-10")); // -10 document.writeln(parseInt("10.9")); // 10 document.writeln(parseInt(10)); // 10 document.writeln(parseInt("10n")); // 10 document.writeln(parseInt("10nnn13")); // 10 document.writeln(parseInt(" 10")); // 10 document.writeln(parseInt("10 ")); // 10 document.writeln(parseInt("k10")); // NaN document.writeln(parseInt("")); // NaN
- parseFloat(문자열) 함수 사용
document.writeln(parseFloat("10")); // 10 document.writeln(parseFloat("-10")); // -10 document.writeln(parseFloat("10.9")); // 10.9 document.writeln(parseFloat(10.9)); // 10.9 document.writeln(parseFloat("10.9abcd")); // 10.9 document.writeln(parseFloat("10.9abcd55")); // 10.9 document.writeln(parseFloat("abcd10.9")); // NaN document.writeln(parseFloat(" 10.9")); // 10.9 document.writeln(parseFloat("10.9 ")); // 10.9 document.writeln(parseFloat("")); // NaN
- +, * 연산자 사용
document.writeln(+"10"); // 10 document.writeln(+"10.1"); // 10.1 document.writeln(+"-10"); // -10 document.writeln(+"abc"); // NaN document.writeln(+true); // 1 document.writeln(+false); // 0 document.writeln("10" * 1); // 10 document.writeln("10.1" * 1); // 10.1 document.writeln("-10" * 1); // -10 document.writeln("abc" * 1); // NaN
문자열을 숫자로 형변환하기! Number() 와 parseInt()의 차이
- Number( string )
인자로 문자열을 받으면 인자를 숫자형으로 변환 시켜 줍니다let str = Number('12345') ; console.log( str , typeof str ) ; // 12345 , 'number'
- parseInt( string )
인자로 받은 문자열을 정수로 변환 시켜 줍니다.let str = parseInt('12345') ; console.log( str , typeof str ) ; // 12345 , 'number'
- 인자로 받은 값에 숫자가 아닌 문자가 들어갈 경우 결과는 달라집니다.
아래처럼 숫자+문자의 조합일 경우 Number() 함수는 NaN을 리턴합니다. let str = Number('123가나다'); console.log( str ) ; // NaN // 하지만 parseInt는 숫자로 시작해서 숫자가 끝날 때 까지만 형변환을 해서 리턴해줍니다. let str = parseInt('123가나다') ; console.log( str ) ; // 123 // 하지만 parseInt도 예외는 있습니다. 시작을 숫자로 하는 경우에는 parseInt도 NaN을 리턴해줍니다. let str = parseInt('가나다123') ; console.log( str ) ; // NaN
- num.toString(n진법)
: toString() 메소드를 호출하여 숫자를 문자열로 변환const str1 = (123.1).toString(); //123.1 (string타입) const str2 = (123).toString(); //123 (string타입) const str3 = (3).toString(2); //11 3을 2진법으로 표현 (string타입)
- String(숫자)
:String() 메소드를 사용해서도 숫자를 문자로 변환const str1 = String(123.1); //123.1 (string타입) const str2 = String(123); //123 (string타입)
(백틱) '${변수}' (백틱)
: Template String (템플릿 문자열)은 ES6 문법이며, 템플릿 문자열은 백틱(`)으로 문자열을 감싸서 표현하고,'${}' 안에 Javascript 변수를 넣으면 해당 변수의 값을 대응시켜서 문자열을 만들어 줍니다.const number1 = 123.1; const number2 = 123; const str1 = `${number1}`; //123.1 (string타입) const str2 = `${number2}`; //123 (string타입) // var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and not 20." // var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // "Fifteen is 15 and not 20." // //문자열 안의 [\n]은 엔터. [\\n]을 작성하면 에스케이프 시퀀스 [\\]에 의해 [\\]는 단순히 문자 [\]로 해석됨. 때문에 [\\n] 전체적으로는 문자 [\]와 문자 [n]으로 해석되기 때문에 개행이 아닌 [\n]가 화면에 표시됨.
- 빈 문자열 이어붙이기
const str1 = 123.1 + ""; //123.1 (string타입) const str2 = 123 + ""; //123 (string타입)
프론트엔드 개발자