提姆寫程式

0%

JS 筆記 - 將資料改成符合前端要傳送的一些字串方法

發表於 分類於 Disqus：
一些簡單但很常用到的字串方法

word

專案遇到後端資料來源與前端的下拉選單資料不相符，需要透過前端加工送出到後端可以順利傳給另一個資料庫做串接。

情境

  • 後端來的資料是全大寫。
  • 前端要透過字串加工改成小駝峰的寫法。
  • 使用 chatAt(), split(),slice(),join()

實作

本次後端資料來的是個人資料，架構示意如下：

API data

1
2
3
4
5
6
7
8
StringData:{
firstName:'TIM',
lastName:'HSU',
title:'MR',
countryCode:'886',
phone:'911222333',
ticket:'1891287654321'
}

修改稱謂

後端來的資料為 MR，但前端需要的是 Mr.，使用 chatAt() ,toUppercase(), slice(),toLowerCase() 調整一下：

1
2
3
4
5
updateTitle(){
    const title = data.title;
    const titleResult = title.charAt(0).toUpperCase() + title.slice(1).toLowerCase() + '.';
    console.log(titleResult) // Mr.
}

修改票號

要將票號資料 1891287654321 改成 189-1287654321。
可以用正規表達式，也可以用字串方法處理再重新組合。

1
2
3
4
5
6
7
8
updateTicket(){
 // 抓取表單的值
      const getTicketNumber = this.data.ticket;
      // #region 將電子機票結構改變成 189-1534567890
      let getTicketNumberFormat = getTicketNumber.split('');
      getTicketNumberFormat.splice(3, 0, '-');
      getTicketNumberFormat = getTicketNumberFormat.join('');
}

套用 Vue 前端框架顯示

範例程式碼：連結

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
  <div class="mx-auto container">
    <h3 class="text-left mb-2">點擊按鈕將稱謂改成開頭大寫</h3>
    <div class="flex items-center">
      <input
        type="text"
        v-model="stringData.title"
        class="w-full p-2 border-2 border-gray-300"
      />
      <button @click="updateTitle" class="ml-2 px-4 py-2 bg-green-400">
        click
      </button>
    </div>

    <h3 class="text-left mb-2 mt-4">點擊按鈕修改票號格式</h3>
    <div class="flex items-center">
      <input
        type="text"
        v-model="stringData.ticket"
        class="w-full p-2 border-2 border-gray-300"
      />
      <button
        @click="updateTicket"
        class="ml-2 px-4 py-2 bg-purple-500 text-white"
      >
        click
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "UpdateString",

  data() {
    return {
      stringData: {
        firstName: "TIM",
        lastName: "HSU",
        title: "MR",
        countryCode: "886",
        phone: "911222333",
        ticket: "1891287654321",
      },
    };
  },
  methods: {
    updateTitle() {
      const title = this.stringData.title;
      const titleResult =
        title.charAt(0).toUpperCase() + title.slice(1).toLowerCase() + ".";
      this.stringData.title = titleResult;
    },
    updateTicket() {
      // 抓取表單的值
      const getTicketNumber = this.stringData.ticket;
      // 將電子機票結構改變成 189-1534567890
      let getTicketNumberFormat = getTicketNumber.split("");
      getTicketNumberFormat.splice(3, 0, "-");
      getTicketNumberFormat = getTicketNumberFormat.join("");
      this.stringData.ticket = getTicketNumberFormat;
    },
  },
};
</script>