Jam's story

[JS] 문자열 다루기 본문

WEB/JavaScript

[JS] 문자열 다루기

애플쩀 2022. 6. 2. 17:02

두자리, 한자리 숫자를  네자리 숫자로 출력 

1.for 문사용 

2.padStart() 사용 

 

padStart( 자릿수, 채울문자열);  - 앞이 채워진다. 
padEnd( 자릿수, 채울문자열);  -뒤가 채워진다. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
<script>

    //두자리숫자를 4자리 숫자로 출력 
/* let no="15";
let numberOfDigits=4-no.length;
for (let i = 0; i < numberOfDigits.length; i++) {
    no="0"+no;    
} */

/* let no="5";
no=no.padStart(4,"0");
 */

 let no=7;
 no=no.toString().padStart(4,"0");
 console.log(no);


/*         var name="hong gil dong";
        var html="<ol>";
        for (let i = 0; i < name.length; i++) {
        html+="<li>"+name.charAt(i)+"</li>";
        }
        html+="</ol>";
        $("#demo").html(html);*/
</script> 
</body>
</html>

 

html을 사용해서 li 태그 만들기 

var name="hong gil dong"
var html="<ul>";
for (let i = 0; i < name.length; i++) {
   html+="<li>"+name.charAt(i)+"</li>"; 
}
html+="</ul>";
// document.getElementById("demo").innerHTML=html;
$("#demo").html(html);

 

startsWith - ~로 시작하는지
endsWith -  ~로 끝나는지  
includes - text 문자열에 target 특정문자열 포함여부를 true/false 반환        
isNaN - 입력받은 수가 숫자인지 아닌지 확인  nan =not a number
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        //~로 끝나는지, ~로 시작하는지 
        var url="www.sist.co.kr";
        document.write(url.startsWith("http://"));
        document.write(url.endsWith("kr"));
        
        //text 문자열에 target 특정문자열 포함여부를 true/false 반환 
   
        var text="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti vero tenetur inventore voluptatum corrupti facilis. Unde cumque facere nihil, quasi voluptatem exercitationem fuga, reprehenderit inventore laboriosam deserunt, eos dolorem excepturi?";
        var target="dolor";
        document.write(text.includes(target));

        document.write(10%0); //nan =not a number
        document.write(10/0); //infinity

        var num="12a"
        //입력받은 수가 숫자인지 아닌지 확인
        document.write("12a는"+isNaN(num)); //숫자가 아니니 true
        document.write("35 : "+isNaN("35")); //숫자이니 false 
    </script>
</body>
</html>

 

 

모든 숫자연산에서 문자열을 숫자로 변화하려고 시도한다.
덧셈연산자 + 를 제외하고 나머지는 문자열을 숫자로 변화하려고 시도한다.
var a = "100";
var b = "10";
var c = a * b;
document.write(typeof a); //string
document.write(typeof c); //number

 

역따옴표(물결모양 밑에 )를 이용하여 , 변수값 가져오기 
역따옴표 안에 `${ 변수명}`

예)   let text = ` name= ${name}, age = ${age}`;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p id="demo"></p>
<script>
     let name="admin";
    let age=20;
  //  let text="name=admin,age=20";
  //홑따옴표가 아닌 역따옴표이다. 
    let text = ` name= ${name}, age = ${age}`;
    document.getElementById("demo").innerHTML=text;
</script>
<script>
    let header="Templates Literals";
    let tags=["java","oracle","html5","jquery"];
    let html=`<h3>${header}</h3><ol>`;
   for (let i = 0; i < tags.length; i++) {
      html+=`<li>${tags[i]}</li>`;
   }
   html+=`</ol>`;
    documnet.getElementById("demo").innerHTML=html;


</script>
</body>
</html>

 

 

 

 1.toString()       -  문자열로 변환 


2.toExponential() 반올림되고 지수 표기법 출력-> 문자열 변환
()괄호 안에 매개변수에는, 반올림 자리 , 소수점 뒤의 문자 수 정의, 
매개변수가 없다면- >반올림하지 않겠다 .


3.toFixed() 자리수를 나타내는데, 지수표기가 아니다. 
자리수보다 작다면 반올림을, 
자리수보다 매개변수가 크다면 0을 붙여 매개변수(자리수) 대로 출력한다. 


4..toPrecision() - 전체자리수 
매개변수가 없다면 -그대로 출력 
매개변수보다 자리수가 크다면 매개변수만큼 출력되도록, 반올림
매개변수가 자리수보다 크다면 0을 붙인다. 


5. 숫자를 나타내기 -js
valueOf()
let x=100; //number
let y=new Number("200") //object
object형을 number형으로 변환할때 사용하는 메소드 -> valueOf() 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        1.toString()
        2.toExponential() 반올림되고 지수 표기법 출력-> 문자열 변환 
        
    </pre>
    <script>
        let x= 9.646;
/*         document.write(x.toExponential(2));
        document.write("<br>");
        document.write(x.toExponential(4));
        document.write("<br>");
        document.write(x.toExponential(6));
        document.write("<br>"); */
/*         document.write(x.toFixed(2));
        document.write("<br>");
        document.write(x.toFixed(4));
        document.write("<br>");
        document.write(x.toFixed(6));
        document.write("<br>");  */


        document.write(x.toPrecision());
        document.write("<br>");
        document.write(x.toPrecision(2));
        document.write("<br>");
        document.write(x.toPrecision(4));
        document.write("<br>");
        document.write(x.toPrecision(6));
        document.write("<br>"); 
    </script>
</body>
</html>

 

 

숫자로 변환하는 방법      
 1.parseInt();       
2.parseFloat();       
3. Number();    </script>
document.getElementById("demo").innerHTML = 
    Number(true) + "<br>" // 1
    + Number(false) + "<br>" // 0
    + Number("10") + "<br>" // 10
    + Number("     10") + "<br>" // 10
    + Number("10     ") + "<br>" // 10
    + Number("     10     ") + "<br>" // 10
    + Number("10.33") + "<br>" // 10.33
    + Number("10,33") + "<br>" // NaN
    + Number("10 33") + "<br>" // NaN
    + Number("Hong") + "<br>" // NaN
    
    
    parseInt(true) + "<br>" // NaN
    + parseInt(false) + "<br>" // NaN
    + parseInt("10") + "<br>" // 10
    + parseInt("     10") + "<br>" // 10
    + parseInt("10     ") + "<br>" // 10
    + parseInt("     10     ") + "<br>" // 10
    + parseInt("10.33") + "<br>" // 10
    + parseInt("10,33") + "<br>" // 10
    + parseInt("10 33") + "<br>" // 10
    + parseInt("Hong") + "<br>" // NaN
    
    
    document.getElementById("demo").innerHTML = 
    parseFloat(true) + "<br>" // NaN
    + parseFloat(false) + "<br>" // NaN
    + parseFloat("10") + "<br>" // 10
    + parseFloat("     10") + "<br>" // 10
    + parseFloat("10     ") + "<br>" // 10
    + parseFloat("     10     ") + "<br>" // 10
    + parseFloat("10.33") + "<br>" // 10.33
    + parseFloat("10,33") + "<br>" // 10
    + parseFloat("10 33") + "<br>" // 10
    + parseFloat("Hong") + "<br>" // NaN

 

 

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] Date  (0) 2022.06.03
[JS] 배열  (0) 2022.06.03
[ JS] days03  (0) 2022.06.02
[JS] 체크 모두풀기, 해제하기  (0) 2022.06.02
[JS] 엔터쳐서 숫자를 이어받고, 합을 출력 -onkeydown 사용  (0) 2022.05.30
'WEB/JavaScript' Related Articles more
Comments