String

 

        var str1="안녕 자바스크립트!";
        var str2="Hello JavaScript!";
        var str3='Hi JS!';
        var str4= new String("Hi JS!");


console.log(typeof str1);   // string
console.log('str1:',str1)   //str1: 안녕 자바스크립트!
console.log('str1.toString():',str1.toString()) // str1.toString(): 안녕 자바스크립트!
console.log(str1 instanceof String);   // 헷깔리면 안됨 !! 이거 false 임 ! instance로 만든게 아니라서 
console.log(str1[0]); //인덱스를 키로 해서 문자열이 저장되어 있다(배열과 같음)

 

console.log(typeof str4);  //object
console.log('str1:',str4)   // str1:String { "Hi JS!" } 찍었을때의 차이만 있을 뿐 똑같아.
console.log('str1.toString():',str4.toString())  //str1.toString(): Hi JS!
console.log(str4 instanceof String); //true
console.log(str4[0]);   // H

1.문자열의 길이 얻기 - length
console.log('str1.length:',str1.length);
console.log('str2.length:',str2.length);
 console.log('str4.length:',str4.length);

 

 

2. 문자열 객체의 함수를 이용해서 텍스트 꾸미기(브라우저에 출력)

document.write('<h2>함수로 텍스트 꾸미기</h2>')
console.log('볼드체(함수):',str1.bold());           // 볼드체(함수): <b>안녕 자바스크립트!</b>
document.write('볼드체(함수):'+str1.bold());
document.write('<br/>볼드체(태그):<b>'+str1+'</b>'); //document.write('<br/>볼드체(함수):<b>',str1,'</b>'); 이거도 됨 !
document.write('<br/>이탤릭체(함수):'+str1.italics());
document.write('<br/>이탤릭체(태그):<i>'+str1+'</i>');
document.write('<br/>가운데 선 긋기(함수):'+str1.strike());
document.write('<br/>가운데 선 긋기(태그):<strike>'+str1+'</strike>');

var url="https://www.nate.com";
console.log('<br/>링크걸기(함수):'+str1.link(url));    // <br/>링크걸기(함수):<a href="https://www.nate.com">안녕 자바스크립트!</a>
document.write('<br/>링크걸기(함수):'+str1.link(url));
document.write('<br/>링크걸기(태그):<a href="'+url+'">'+str1+'</a>');  //코드 복잡함 이건 함수가 더 깔끔 

 

3.대소문자 변경
console.log('대문자로 변경:',str2.toUpperCase());   // 대문자로 변경: HELLO JAVASCRIPT!
console.log('소문자로 변경:',str2.toLowerCase());   // 소문자로 변경: hello javascript!

 

4. 특정위치(인덱스)의 하나의 문자 얻어오기 (charAt() : 인덱스는 0부터 시작 )
console.log(str3.charAt(3));  //  J
console.log('자바스크립트'.charAt(3));  //

 

5. 문자열에서 특정 문자열 얻어오기 substring(시작,끝), 끝 인덱스 포함 x
   console.log('ACADEMY'.substring(3,7));   // DEMY
5-1 자바에만 있는 것( substr(시작, 가져 올 문자열의 갯수))
   console.log('ACADEMY'.substr(3,4));   //  DEMY

 

6.특정 위치의 아스키코드값 charCodeAt(인덱스) : 자바의 codePointAt(int index)
        console.log('ACADEMY'.charCodeAt(3));   // 68

 

7. 특정 코드값을 문자로 변환(클래스 메소드)String.fromCharCode(코드값)  자바의 정적메소드
        console.log(String.fromCharCode(68));     // D

 

    ※String객체는 문자 하나 하나가 배열형태 처럼로 저장됨.
   ex)

 var str="AB가C";
    str[0]="A"
    str[1]="B"
    str[2]="가"
    str[3]="C" 형태로 저장됨.

    var str="AB가C"; 는  1)그리고 2)처럼 접근할수 있다. 즉 유사배열이다
    1)
    var str= new Array(4);
    str[0]="A"
    str[1]="B"
    str[2]="가"
    str[3]="C"
    2)
    var str = ["A","B","가","C"];

 

 for(var i=0 ; i<str3.length; i++)
      console.log(str3[i]);      // 이건 되는데
      str3.forEach(function(e,index){console.log(e)});   foreach문은 배열만가능 !!  그래서 String 객체는 안돼! 
for(index in str3) console.log(str3[index]);      // 이렇게도 가능

 

 

문제)
     문자열을 매개변수로 받는 함수로, 받은 인자가 숫자형식이 아니면 false반환
      숫자형식이면 true를 반환하는 함수를 정의해라. 그리고 호출해서 결과 확인해라...   
      "12A"->false  ,"가100"->false, "99"->true      

HINT)

  자스에서 비교시
    1.숫자와 숫자형식의 문자열 =>숫자형식의 문자열이 숫자로 변환
      '100' >= 99 : 100 >= 99 :true
    2.슷지형식 문자열 과 숫자형식 문자열 => 문자열 비교할때 처럼 한자씩 
      차례로 코드값 비교
      '100' >='99' :문자열 비교 :false
    3.슷자형식이 아닌 문자열과 숫자 :무조건 false
      '가' > 99 : false
      '가' > '99' : true 

var isNumber = function(str){
	//방법1.자스함수 미 사용(모든 하나의 숫자는 0과9 사이다.)
    for(i=0; i<str.length ; i++){
		if(!(str[i]>=0 && str[i]<=9)) return false;      
     }
	
    //방법2 자스함수 사용
    for(i=0; i<str.length ; i++){
      if(!(str[i].charcodeAt(0) >= '0'.charCodeat(0) &&
           str[i].charcodeAt(0) <= '9'.charCodeat(0)))
       return false;
    }

	//방법3 자스함수 사용
	for(i=0; i<str.length ; i++){
   	  if(!(str.charAt(i)>=0 && str.charAt(i) <=9))
      return false;
    }
     return true
};

console.log(isNumber("1A2A"));    //false
console.log(isNumber("가100"))   //false
console.log(isNumber("99"))      //true

 

8. 구분자로 문자열 분리-배열 반환
     var tel="010.1234.5678";
 

 방법1 .을 구분자로 사용 , 오 얜 바로 분리되네!! 자바철럼 정규표현식의 .으로 처리 안함! 

  var arr=tel.split('.');

 방법2
  var arr=tel.split('.',2);

 방법3  정규표현식으로 만들기 이때 /./은 임의의 한 문자로 분리
  var arr=tel.split(/./g);  

 방법4  이건 tel.split('.'); 이것과 같아진 것 자스에서 정규표현식으로 만드는 것은 //로 감싸준다
  var arr=tel.split(/\./g); 
     

  console.log(arr); ===> 출력시 모두 다  Array(3) [ "010", "1234", "5678" ]

 

 

9 특정 문자열의 인덱스값 알아내기 indexOf  왼쪽부터
     console.log('ACADEMY'.indexOf('CAD'));   //1
     console.log('ACADEMY'.indexOf('CaD'));   // -1 (값 없으면 -1반환)
9-1  lastIndexOf   오른쪽 부터
    console.log('ACADEMY'.indexOf('A'));      // 0
    console.log('ACADEMY'.lastIndexOf('A'));  //2

 

 예제)  이메일 주소에서 @와 .사이에 있는 값만 얻어 오기

   var emails=['kim@naver.com','park@cyworld.com', 'lee@nate.com'];
    function print(emails){

          emails.forEach(function(item){

               console.log(item.substring(item.indexOf('@')+1,item.lastIndexOf('.')));

           })

    }

    print(emails)

 

 10."양쪽"의  공백 제거 trim()
    console.log('X'+'H   E   Y     '+'Y');         //X     H    E    Y     Y
    console.log('X'+'H   E   Y     '.trim()+'Y');       //XH  E    YY

 

'학원 > JS' 카테고리의 다른 글

11/07 37-3 [JS] Date  (0) 2022.11.07
11/07 37-2 [JS] Math  (0) 2022.11.07
11/4 36-11 [JS] BOM_2  (0) 2022.11.05
11/4 36-10 [JS] BOM_1 (각종 함수들)  (1) 2022.11.05
11/3 35-7 [JS] BOM_1(팝업창 &주소찾기)  (0) 2022.11.04

+ Recent posts