介紹完引入路徑在 @schematics/angular/utility 底下的 API 之後，接下來要介紹給大家的 API 是引入路徑在 @angular-devkit/core 底下的 API，大致上有以下這些分類：

• analytics
• experimental
• json
• logging
• terminal
• workspaces
• exception
• utils
• virtual-fs

但因為篇幅與常用度上的考量，所以這部份只會先介紹筆者覺得較常用、較好用的 API ，其他的大家如果有需要再點進去看囉！

之前筆者在 Day06 - 與範本共舞的文章裡有跟大家提到過幾個函式，而那幾個函式其實就是來自於 @angular-devkit/core/src/utils 底下的 string.ts 。

在同層資料夾底下，其實還有不少好用的 API ，依檔案來區分也可分為以下幾項：

• array
• lang
• literals
• object
• partially-ordered-set
• priority-queue
• string
• template

此篇則依序先介紹以下幾個：

• string
• array
• lang
• object

所以接下來我們就先從 strings 開始吧！

string

關於 Angular 專案內常用的字串命名方式之處理小工具。

引入路徑：

import { strings } from '@angular-devkit/core';

函式一共有以下七個：

• decamelize
• dasherize
• camelize
• classify
• underscore
• capitalize
• levenshtein

decamelize

用途：將傳入的字串全轉成全小寫，且用 _ 分隔多個單字（但如果原本已有用符號隔開，則不會加上 _ ）。

範例：

strings.decamelize('innerHTML');         // 'inner_html'
strings.decamelize('action_name');       // 'action_name'
strings.decamelize('css-class-name');    // 'css-class-name'
strings.decamelize('my favorite items'); // 'my favorite items'
strings.decamelize('LeoChen');           // 'leo_chen'
strings.decamelize('LEO.CHEN');          // 'leo.chen'
strings.decamelize('LEO5CHEN');          // 'leo5_chen'
strings.decamelize('LEOCHEN');           // 'leochen'

原始碼

dasherize

用途：將傳入的字串全轉成小寫，且用 - 分隔多個單字（只會替換掉空格與 _ ）。

範例：

strings.dasherize('innerHTML');         // 'inner-html'
strings.dasherize('action_name');       // 'action-name'
strings.dasherize('css-class-name');    // 'css-class-name'
strings.dasherize('my favorite items'); // 'my-favorite-items'
strings.dasherize('LeoChen');           // 'leo-chen'
strings.dasherize('LEO.CHEN');          // 'leo.chen'
strings.dasherize('LEO5CHEN');          // 'leo5-chen'
strings.dasherize('LEOCHEN');           // 'leochen'

原始碼

camelize

用途：將傳入的字串全轉成小駝峰式的命名方式。

範例：

strings.camelize('innerHTML');         // 'innerHTML'
strings.camelize('action_name');       // 'actionName'
strings.camelize('css-class-name');    // 'cssClassName'
strings.camelize('my favorite items'); // 'myFavoriteItems'
strings.camelize('LeoChen');           // 'leoChen'
strings.camelize('LEO.CHEN');          // 'lEOCHEN'
strings.camelize('LEO5CHEN');          // 'lEO5CHEN'
strings.camelize('LEOCHEN');           // 'lEOCHEN'

原始碼

classify

用途：將傳入的字串全轉成大駝峰式的命名方式。

範例：

strings.classify('innerHTML');         // 'InnerHTML'
strings.classify('action_name');       // 'ActionName'
strings.classify('css-class-name');    // 'CssClassName'
strings.classify('my favorite items'); // 'MyFavoriteItems'
strings.classify('LeoChen');           // 'LeoChen'
strings.classify('LEO.CHEN');          // 'LEO.CHEN'
strings.classify('LEO5CHEN');          // 'LEO5CHEN'
strings.classify('LEOCHEN');           // 'LEOCHEN'

原始碼

underscore

用途：將傳入的字串全轉成小寫，且用 _ 分隔多個單字（只會替換掉空格與 - ）。

範例：

strings.underscore('innerHTML');         // 'inner_html'
strings.underscore('action_name');       // 'action_name'
strings.underscore('css-class-name');    // 'css_class_name'
strings.underscore('my favorite items'); // 'my_favorite_items'
strings.underscore('LeoChen');           // 'leo_chen'
strings.underscore('LEO.CHEN');          // 'leo.chen'
strings.underscore('LEO5CHEN');          // 'leo5_chen'
strings.underscore('LEOCHEN');           // 'leochen'

原始碼

capitalize

用途：將傳入的字串的首字轉成大寫。

範例：

strings.capitalize('innerHTML');         // 'InnerHTML'
strings.capitalize('action_name');       // 'Action_name'
strings.capitalize('css-class-name');    // 'Css-class-name'
strings.capitalize('my favorite items'); // 'My favorite items'
strings.capitalize('leo.chen');          // 'Leo.chen'
strings.capitalize('leo5chen');          // 'Leo5chen'
strings.capitalize('leochen');           // 'Leochen'

原始碼

levenshtein

用途：計算傳入的兩個字串之間的編輯距離，又稱萊文斯坦距離（ Levenshtein distance ）。

範例：

strings.levenshtein('Leo', 'Chen'); // 3

原始碼

array

關於陣列處理的小工具，函式也只有 clean 一個。

引入路徑：

import { clean } from '@angular-devkit/core';

clean

用途：將傳入的陣列裡的 undefined 全都過濾掉，並回傳一個新的陣列。

注意！此處回傳的陣列為淺拷貝，且此函式不會將 null 值給過濾掉。

範例：

const sampleArray = [
  'Leo', undefined, null, 1, [],
  {}, '', false, true, 0
];

clean(sampleArray);
/*
[
  'Leo', null, 1,
  [],    {},   '',
  false, true, 0
]
*/

原始碼

lang

關於判斷 Promise 與 Observable 的小工具。

引入路徑：

import { isPromise, isObservable } from '@angular-devkit/core';

isPromise

用途：判斷傳入的值是否為 Promise 。

範例：

const sampleA = of([]);
const sampleB = of([]).toPromise();

isPromise(sampleA); // false
isPromise(sampleB); // true

原始碼

isObservable

用途：判斷傳入的值是否為 RxJS 的 Observable 。

範例：

const sampleA = of([]);
const sampleB = of([]).toPromise();

isPromise(sampleA); // true
isPromise(sampleB); // false

原始碼

object

關於物件處理的小工具。

引入路徑：

import { mapObject, deepCopy } from '@angular-devkit/core';

mapObject

用途：將傳入的物件使用另一個傳入的轉換器轉換成另一種物件（原本的 key 值不變，變的是該 key 值的 value ）。

範例：

const sample = {
  name: 'Leo',
  gender: 'Male'
};

mapObject(sample, (key, value) => {
  if ( key === 'name' ) {
    return value + ' Chen'
  } else if ( key === 'gender' ) {
    return 'Female'
  }
}); // { name: 'Leo Chen', gender: 'Female' }

原始碼

deepCopy

用途：將傳入的值使用深拷貝的方式複製一份。

注意，只會複製陣列與物件，其他的會直接回傳。

範例：

const sample = {
  name: 'Leo',
  gender: 'Male'
};

deepCopy(sample);

原始碼

測試原始碼

本日結語

雖然寫跟看這類的 API 文章很枯燥，但筆者可是每行程式碼都有仔細看過，每個函式都有用範例實測過，絕不只是單純地複製貼上而已。

參考資料

• @angular-dekit/core 的 Source Code