MENU

【JavaScript初学者】郵便番号にハイフンを入れる方法

 

郵便番号にハイフンを入れる実装を行ったのでアウトプットします。

使用したのはsubstrメソッドです。

substrの使い方

substr( 開始位置, 文字数 )

 

郵便番号にハイフンを入れる方法

  let code = '1234567';
  let start_code = code.substr(0,3);
  let end_code = code.substr(3);
  let post_code =  start_code + '-' + end_code;
  console.log(post_code); 

結果

123-4567

substr(0,3)と記述すると0文字目から数えて3文字分の範囲を切り出すという意味になります。  

 

電話番号にハイフンを入れる

let code = '09012345678';
let start_code = code.substr(0,3);
let center_code = code.substr(3,4);
let end_code = code.substr(7,8);
let phon_code =  start_code + '-' + center_code + '-' + end_code;
console.log(phon_code); 

結果

090-1234-5678

 

 

 
 
未経験からエンジニアを目指すなら↓

【JavaScript初学者】0補完する方法

 

商品番号など「0001」のように数字の頭に0をつけて表示されるような実装を行ったのでアウトプットします。  

 

先頭に0を追加する

先頭に0を補完する処理にはString.slice() を使って桁数を追加します。

let number = 1;
let result = ( '0000' + number ).slice( -4 );
console.log(result);

結果

0001

指定の桁数だけ '0000' の0を増やし、その0の桁数を slice( -4 ) として指定します。

 

補足

指定の桁数を '000'としても同じ結果が得られます。

let number = 1;
let result = ( '000' + number ).slice( -4 );
console.log(result);

結果

0001

 

 

 
 
未経験からエンジニアを目指すなら↓

【JavaScript初学者】配列に値を追加す方法

 

末尾に追加する

配列オブジェクト.push(追加する値);

先頭に追加する

配列オブジェクト.unshift(追加する値);

末尾に追加する

配列オブジェクト.splice(追加する位置, 0, 追加する値);

末尾に追加する

配列オブジェクト.splice(追加する位置, 0, 追加する値);

 

使い方

>main.js

{
  console.log(Math.floor(Math.random() * 10) + 1);
}

結果

>1~10のランダムな数字

 

 

 
 
未経験からエンジニアを目指すなら↓

【JavaScript初学者】スプレッド構文の使い方

 
スプレッド構文を使えば配列の中に配列を追加することができます。  

スプレッド構文

書き方

{
  ...〇〇;
}

 

使い方

>main.js

{
  const b = [10, 20];
  const a = [20, 10, 50, 60, ...b];
  console.log(a);
}

結果

>[20, 10, 50, 60, 10, 20]

 

関数の引数に使う場合

>main.js

{
  const b = [10, 20, 50];

  function sum(a, b, c) {
   console.log(a + b + c);
  }

  sum(...b); //sum(10, 20, 50)と同じ
}

結果

>80

 

補足

スプレッド構文を使わずに配列を追加しようとすると配列の中に配列ができてしまう。

>main.js

{
  const b = [10, 20];
  const a = [20, 10, 50, 60, b];
  console.log(a);
}

結果

>20, 10, 50, 60, Array(2)

 

 
 
未経験からエンジニアを目指すなら↓

【JavaScript初学者】大文字と小文字を変換する方法

 
大文字に変換するにはtoUpperCase 小文字を変換するにはtoLowerCaseを使用します。  

大文字と小文字を変換する方法

書き方

toUpperCase()   //大文字に変換
toLowerCase()   //小文字に変換

 

使い方

>main.js

{
 const name = 'tanaka';
 const name2 = 'TANAKA';

 console.log(name.toUpperCase());
 console.log(name.toLowerCase());
}

結果

>TANAKA
>tanaka

 

 

 
 
未経験からエンジニアを目指すなら↓

【JavaScript初学者】警告ポップアップを表示する方法

   

確認ポップアップを表示

alertを使う

>main.js

{
  alert('警告!');
}

結果

 

confirmを使う

{
 confirm('上書きしますか?');
}

結果  
 
また、confimの返り値はOKを押したらtrue、キャンセルを押したらfalseを返すので ユーザーがどちらを押したか以下のように判定できる。

{
  const a = confirm('上書きしますか?');
  if(a){
    console.log(a);
    console.log('上書きしました');
  } else {
    console.log(a);
    console.log('キャンセルしました');
  }
}

結果

OKを押した場合
 >true
 >上書きしました

キャンセルを押した場合
 >false
 >キャンセルしました

 
 
 
 
 
 
未経験からエンジニアを目指すなら↓

【JavaScript初学者】四捨五入する方法

 
   

小数点を四捨五入する方法

 Math.floor(○) => 小数点以下を切り捨てて
 Math.ceil(○) => 小数点以下を切り上げ
 Math.round(○) => 四捨五入
 ○.toFixed(数字) => 小数点以下 (数字)桁まで表示

使い方

>main.js

{
  const a = 107/13;

  console.log(a);
  console.log(Math.floor(a));
  console.log(Math.ceil(a));
  console.log(Math.round(a));
  console.log(a.toFixed(3)); 
}

結果

8.23076923076923
8
9
8
8.231

 

 

 
 
未経験からエンジニアを目指すなら↓