# querystring

- ASP.NET狀態管理
- 格式：
在網址結尾加上一個問號（？）開始，每一組參數都是用「＆」區隔開來，是一種KEY / Value的組合。
- 目的：
是附加在網頁URL結尾的資訊。主要是在Url上傳遞資料，可能是一個搜尋字串、頁碼、某項特定的指標…或類似的東西

## 參數
- 解析和格式化URL查詢字符串的實用程序

### querystring.escape（str）

:::info
對應的解碼函數為unescape
:::

- str (string) 以針對URL查詢字串執行百分比(%)編碼 。

> 不能直接用於URL編碼，它的真正作用是返回一个字符的Unicode編碼值(十六進制字符)。

    querystring.escape("王下邀月熊")
    // returns  '%u738B%u4E0B%u9080%u6708%u718A'

### querystring.unescape（str）

:::info
對應的編碼函數為escape
:::

- str (string) 對給定的URL百分比編碼字符(%)執行解碼str

    querystring.unescape('%u738B%u4E0B%u9080%u6708%u718A')
    // returns  '王下邀月熊'

### querystring.parse（str [，sep [，eq [，options]]]）

- str (string) 要解析的URL查詢字串
- sep (string) Separator 分隔查詢字串中的鍵和值的字元。默認為'&'。
- eq (string) 分隔查詢字串中的鍵和值的字元。默認為'='。

> 該querystring.parse()方法將URL查詢字串（str）解析為鍵和值對的集合。
例如，查詢字串 'foo=bar&abc=xyz&abc=123' 被解析為：

    {
         foo: 'bar',
         abc: ['xyz', '123']
    }

:::warning
querystring.parse()方法回傳的對象在原型上並不是javascript擴展的Object。代表常用的Object方法，例如obj.toString()，obj.hasOwnProperty()和其他人都沒有定義，因此將無法正常工作。
:::
- options (object)
- decodeURIComponent (Function) 在對查詢字串中的百分比編碼(%)的字符進行解碼時使用的函數。默認為 querystring.unescape()。
> 默認情況下，查詢字串中的百分比編碼(%)字符將被假定為使用UTF-8編碼。如果使用替代字符編碼，則decodeURIComponent需要指定替代選項：

        // Assuming gbkDecodeURIComponent function already exists...

        querystring.parse('w=%D6%D0%CE%C4&foo=bar', null, null,{ decodeURIComponent: gbkDecodeURIComponent })

- maxKeys (number) 要解析的鍵的最大數量。默認為1000。指定0刪除鍵計數限制。

        querystring.parse("name=whitemu&sex=man&sex=women")
        // returns:
        { 
            name: 'whitemu', 
            sex: [ 'man', 'women' ] 
        }

        加入option {maxKeys:2} ：

        querystring.parse("name=whitemu#sex=man#sex=women","#",null,{maxKeys:2})
        //returns:
        { 
            name: 'whitemu', 
            sex: 'man' 
        }

### querystring.stringify（obj [，sep [，eq [，options]]]）

:::info
相當於 parse 的逆向操作
:::

- obj (Object) 要序列化為URL查詢字符串的對象
- sep (string) Separator 分隔查詢字串中的鍵和值對的字元。默認為'&'。
- eq (string) 分隔查詢字串中的鍵和值的字元。默認為'='。

> 該querystring.stringify()方法obj通過遍歷對象的"自身屬性"，從給定值生成URL查詢字串。
它序列化傳入的以下類型的obj值：
string ，數字 ，布林值 ，string [ ] ，number [ ] ，boolean [ ]
其他任何輸入值將被強制為空字符串。

    querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
    // returns 'foo=bar&baz=qux&baz=quux&corge='

    querystring.stringify({ foo: 'bar', baz: 'qux' }, ';', ':');
    // returns 'foo:bar;baz:qux'

- options (object)
- encodeURIComponent (Function) 在查詢字串中將URL不安全字符轉換為百分比編碼(%)時使用的函數。默認為 querystring.escape()。
> 默認情況下，要求在查詢字串中進行百分比編碼(%)的字符將被編碼為UTF-8。如果需要替代編碼，則encodeURIComponent需要指定替代選項：

        // Assuming gbkEncodeURIComponent function already exists...
            
        querystring.stringify({ w: '中文', foo: 'bar' }, null, null,{ encodeURIComponent: gbkEncodeURIComponent });

## FaceAI 應用
### querystring.parse

// containers/routes/Face.js
// containers/routes/Capture.js
// 利用querystring.parse 將state中location.search字串轉換成object

const query = querystring.parse(location.search.substring(1))

// selectors/index.js
// 利用createSelector(陣列,轉換的function)建立getQuery搜尋器 router.location.search內容即為query
// getQuery將query(string)先將？取代為空字串再轉換為object

const routerSelector = state => state.router
export const getQuery = createSelector(routerSelector, router => {
  const {
    location: { search: query = '' }
  } = router

  return querystring.parse(query.replace('?', ''))
})

// containers/routes/Log.js

const mapStateToProps = state => {
  const query = getQuery(state)

  if (!query.isSystem) {
    query.isSystem = '0'
  }

  return {
    logs: entitySelector.logs(state),
    meta: state.meta.logs,
    query
  }
}

### querystring.stringify

// utils/index.js
// 利用querystring.stringify將filteredObj(搜尋條件-json object)轉換為字串

export const queryToString = (query = {}) => {
  const filteredObj = Object.keys(query)
    .filter(key => typeof query[key] !== 'undefined' && query[key] !== '' && query[key] !== null)
    .reduce(
      (obj, key) => ({
        ...obj,
        [key]: query[key]
      }),
      {}
    )
  
  return querystring.stringify(filteredObj)
}

// components/Log/index.js
// 將各個按鍵造成的搜尋結果(Object)轉換成字串

const handleSearch = values => {
    push({
      search: queryToString({
        ...query,
        ...values,
        page: 1
      })
    })
  }
  const handleRest = () => {
    push({
      search: queryToString({ isSystem: tabKey })
    })
  }
  const handlePageChange = (page, pageSize) => {
    push({
      search: queryToString({
        ...query,
        page,
        pageSize
      })
    })
  }
  const handleTabChange = activeKey => {
    push({
      search: `?isSystem=${activeKey}`
    })
  }

  useEffect(() => {
    fetchLogs(query)
  }, [])

// compoments/Log/Filter.js
// 匯出紀錄之API

href={`${API_URL}/logs/_/export?${queryToString(exportQuery)}`}

## package

- querystring-es3@0.2.0
- querystring@0.2.0
- querystringify@^2.1.1