# @baloise/web-app-utils 中文文档

规范地址：https://npmcn.com/package/%40baloise/web-app-utils/

版本：3\.17\.4
npm 元数据更新时间：2026-07-01T13:25:20.883Z
中文译文更新时间：2026-11-07T17:01:35.178Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40baloise/web-app-utils
原文对照：https://npmcn.com/package/%40baloise/web-app-utils/?lang=original
项目主页：https://github.com/baloise/web-app-utils
源码仓库：https://github.com/baloise/web-app-utils

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：146 kB，26 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- 首次发布：2021-04-29T13:34:22.396Z
- 最新版本发布：2026-07-01T13:25:20.658Z
- 近 30 天下载量：4152（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：93（近 12 个月 7 个）

## 中文简介

Baloise网络应用程序的公用事业

## 安装

```sh
npm install @baloise/web-app-utils
```

也可以使用：`pnpm add @baloise/web-app-utils`、`yarn add @baloise/web-app-utils`、`bun add @baloise/web-app-utils`

## README

# @baloise/web-app-utils

[![Continuous](https://github.com/baloise/web-app-utils/actions/workflows/continuous.yml/badge.svg?branch=master)](https://github.com/baloise/web-app-utils/actions/workflows/continuous.yml) [![Release](https://github.com/baloise/web-app-utils/actions/workflows/release.yml/badge.svg?branch=master)](https://github.com/baloise/web-app-utils/actions/workflows/release.yml) ![npm](https://img.shields.io/npm/v/@baloise/web-app-utils) ![npm bundle size](https://img.shields.io/bundlephobia/min/@baloise/web-app-utils) ![npm](https://img.shields.io/npm/dt/@baloise/web-app-utils) ![GitHub](https://img.shields.io/github/license/baloise/web-app-utils) ![GitHub issues](https://img.shields.io/github/issues/baloise/web-app-utils)

Baloise网络应用的 Javascript 工具.

## 安装指南

### 使用 npm

```bash
npm i @baloise/web-app-utils
```

## 目录

-   [语言 Utils](https://npmcn.com/package/%40baloise/web-app-utils/#readme-language-utils)
-   [浏览器 Utils](https://npmcn.com/package/%40baloise/web-app-utils/#readme-browser-utils)
-   [整合 Utils 系统](https://npmcn.com/package/%40baloise/web-app-utils/#readme-integration-utils)
-   [通用型号 Utils](https://npmcn.com/package/%40baloise/web-app-utils/#readme-common-model-utils)
-   [常见 UTIs](https://npmcn.com/package/%40baloise/web-app-utils/#readme-common-utils)

## 语言 Utils

语言utils帮助列出通用语言,并检测出正确的语言.

### 语言模式

#### `valueOf`

返回给定语言密钥的语言, 或者如果未注册 Lauage 则返回未定义 .

**签署** `valueOf(key: string): Language | undefined`

**示例**

```typescript
const language = LanguageModel.valueOf('de')
if (language === undefined) {
  // language is not registered
}
```

#### `valueOfOrDefault`

返回给定语言密钥的语言,或者如果语言没有注册,则返回默认语言.

**签署** `valueOfOrDefault(key: string): Language`

**示例**

```typescript
const language = LanguageModel.valueOfOrDefault('de')
```

#### `isValidKey`

验证指定语言密钥是否注册为支持语言 .

**签署** `isValidKey(key: string): boolean`

**示例**

```typescript
if (LanguageModel.isValidKey('de')) {
  // language key is valid
} else {
  // language key is not valid
}
```

#### 语文

我们为我们得到支持的国家提供了各种语言清单。 这些语言的类型 `LanguageModel`。 。 。 .

##### `LanguagesOfSwitzerland`

含有默认语言的德文、法文、意大利文和英文列表.

**示例**

```typescript
LanguagesOfSwitzerland.isValidKey('de') // true
LanguagesOfSwitzerland.isValidKey('be') // false
```

##### `LanguagesOfGermany`

含有默认语言德文的德文和英文列表 .

##### `LanguagesOfBelgium`

包含默认语言的荷兰语,法语,意大利语和英语列表.

##### `LanguagesOfLuxembourg`

List of luxembourgish, french & english with 默认语言 loxembourgish. 中国语言大学.

#### 语言

语言对象只有一个属性 `key` 具有语言密钥的 `en`。 。 。 .

## 浏览器 Utils

浏览器 utils 在与 broser api 合作时解决一些常见请求.

> 为了与饼干合作,我们重新命令使用库 [js-饼干](https://www.npmjs.com/package/js-cookie)。 。 。 .

> 由于与url合作,我们重新命令使用库 [查询字符串](https://www.npmjs.com/package/query-string)。 。 。 .

### 职能

#### `scrollToAnchorElement`

滚动到带有属性的角元素 `data-ref="heading"`。 。 。 .

**签署** `scrollToAnchorElement(referenceName: string): void`

**示例**

```html
<div data-ref="heading">...</div>
```

```typescript
scrollToAnchorElement('heading')
```

#### `scrollToTopOfBody`

卷之三·诸方(下)\\诸方门目(下) 身体上 (下).

**签署** `scrollToTopOfBody(): void`

#### `open`

在当前标签中打开新位置.

**签署** `open(url: string): void`

#### `openInNewWindow`

在新标签中打开新位置.

**签署** `openInNewWindow(url: string): void`

#### `getBrowserLanguage`

返回主语言密钥。 例如,如果浏览器有语言 `de-CH` 函数返回语言密钥 `de`因此,我们可以使用我们的 `LangaugeModel`。 。 。 .

**签署** `getBrowserLanguage(): string`

**示例**

```typescript
const langKey = getBrowserLanguage()
if(LanguagesOfSwitzerland.isValidKey(langKey)) { ... }
...
```

#### `disableDragAndDropFiles`

禁用整个网络应用程序拖放 .

**签署** `disableDragAndDropFiles(): void`

#### `getBrowserInfo`

从浏览器返回一些有用的信息.

**签署** `getBrowserInfo(): BrowserInfo`

```typescript
interface BrowserInfo {
  cookiesEnabled?: boolean
  language?: string
  timezone?: string
  userAgent?: string
}
```

## 整合 Utils 系统

集成工具有助于我们使用集成工具,如一个信任或用户中心.

### `loadConsentManagerBaloiseSwitzerland`

将同意管理脚本直接从我们的主要 cms 系统中装入必要的参数.

**签署** `loadConsentManagerBaloiseSwitzerland(): void`

## 通用型号 Utils

一些在日常业务中使用的有用模型.

### 请求国

这个 `RequestState` enum 帮助有一个状态变量来显示当前 api 调用的位置 .

```typescript
export enum RequestState {
  INIT,
  RUNNING,
  SUCCESS,
  ERROR,
}
```

**示例(角)**

```typescript
import { Component, OnInit } from '@angular/core'
import { RequestState } from '@baloise/web-app-utils'
import { ConfirmEmailService, EmailConfirmationResponse } from '../confirm-email.service'

@Component({
  selector: 'confirm-email-page',
  templateUrl: './confirm-email.page.component.html',
  styleUrls: ['./confirm-email.page.component.scss'],
})
export class ConfirmEmailPageComponent implements OnInit {
  confirmEmailResponse: EmailConfirmationResponse
  requestState: RequestState = RequestState.INIT

  constructor(private confirmEmailService: ConfirmEmailService) {}

  confirmEmail() {
    this.requestState = RequestState.RUNNING
    this.confirmEmailService
      .confirmEmail()
      .toPromise()
      .then(resp => {
        this.requestState = RequestState.SUCCESS
        this.confirmEmailResponse = resp
      })
      .catch(() => {
        this.requestState = RequestState.ERROR
      })
  }
}
```

# 常见 UTIs

## API 密码

### 是等分线

`areArraysEqual(a: any, b: any) => boolean`

回返 `true` 如果数组相等

```typescript
areArraysEqual(['a', 'b'], ['b', 'a']) // true
```

### 现在

`now() => Date`

返回具体时间的日期实例

```typescript
const date = now()
// Wed Mar 10 2021 20:30:32 GMT+0100 (Central European Standard Time)
```

### {\\fn华文楷体\\fs16\\1che0e0e0}今天

`today() => Date`

返回联合来文日期实例,时间定为0

```typescript
const date = today()
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)
```

### 时间

`floorTime(date: Date) => Date`

返回 JS 日期实例,时间设定为 0

```typescript
const date = floorTime(new Date())
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)
```

### 周期

`ceilTime(date: Date) => Date`

返回 JS 日期实例,时间设定为可能结束

```typescript
const date = ceilTime(new Date())
// Wed Mar 10 2021 23:59:59 GMT+0100 (Central European Standard Time)
```

### 格式约会

`formatDateString(date: Date) => string`

以 ISO 8601 格式返回格式化的日期字符串。 可选择控制日期的部件和标记.

```typescript
const dateString = formatDateString(new Date())
// '2022-02-14'
```

### 是 ValidIso String 语句

`isValidIsoString(dateString: any) => any`

如果给定的日期字符串符合同位素日期格式,则验证.

```typescript
isValidIsoString('2022-02-14')
// 'true'
```

### 格式

`format(locale: any, date: Date) => any`

根据给定的语言格式化日期.

```typescript
format('de-CH', new Date())
// '14.2.2022'
```

### 剖析

`parse(dateString: string, locale: any) => any`

将同位素日期字符串分析为 Javascript 日期对象.

```typescript
const dateString = parse('2021-03-10')
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)
```

### 日期分隔符

`dateSeparator(locale: any) => string`

返回将日表月和年分开的字符 .

```typescript
dateSeparator('de-CH')
// .
```

### 弹跳

`debounce(func: any, wait: any) => any`

跳出函数等待一定的时间,然后再次运行内在函数. 这将减少一个函数被调用的次数.

```typescript
const debounceFunction = debounce(function () {
  // The function's code
}, 250)

window.addEventListener('resize', debounceFunction)
```

### 时空

`isEmpty(value: any) => boolean`

回返 `true` 如果数值为空

### 输入键

`isEnterKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `Enter` 键

### 是 SpaceKey 键

`isSpaceKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `Space` 键

### 是 逃逸键

`isEscapeKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `Escape` 键

### 后空格键

`isBackspaceKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `Backspace` 键

### 是箭头下键

`isArrowDownKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `ArrowDown` 键

### 是箭头键

`isArrowUpKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `ArrowUp` 键

### 是箭头左键

`isArrowLeftKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `ArrowLeft` 键

### 是右键

`isArrowRightKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `ArrowRight` 键

### 是家钥

`isHomeKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `Home` 键

### 键

`isEndKey(event: KeyboardEvent) => boolean`

回返 `true` 如果键盘事件是由 `End` 键

### 数字 当地

`numberLocale(locale: any) => string`

将区域解析为正确的显示区域

```typescript
numberLocale('de-CH')
// 'de-CH'
```

### 日期 当地

`dateLocale(locale: any) => string`

将区域解析为正确的显示区域

```typescript
numberLocale('de-CH')
// 'fr-CH'
```

### 数字

`isValidMonetaryNumber(stringValue: string) => boolean`

回返 `true` 如果数组相等

```typescript
isValidMonetaryNumber(`1'000.99`) // true
```

### 获取十进制分隔符

`getDecimalSeparator(locale: any) => string`

返回给定区域的小数分隔符

```typescript
getDecimalSeparator('de-ch') // .
```

### 获取千人分隔符

`getThousandSeparator(locale: any) => string`

返回给定语言的千位分隔符

```typescript
getThousandSeparator('de-ch') // '
```

### 本地编号

`formatLocaleNumber(locale: any, number: number, minimumFractionDigits: number) => string`

将数字格式化为给定的语言

```typescript
formatLocaleNumber('de-ch', 1000.42) // 1'000.42
```

### 解析本地数字

`parseLocaleNumber(locale: any, stringNumber: string) => number`

将本地语言格式编号分析为本地数字

```typescript
parseLocaleNumber('de-ch', '1'000.42') // 1000.42
```

## 常见问题

### @baloise/web-app-utils 是什么？

Baloise网络应用程序的公用事业

### 如何安装 @baloise/web-app-utils？

在项目目录运行 npm install @baloise/web-app-utils，或使用 pnpm add / yarn add / bun add。

### @baloise/web-app-utils 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @baloise/web-app-utils 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @baloise/web-app-utils 可以商用吗？

@baloise/web-app-utils 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @baloise/web-app-utils 的下载量有多少？

根据 npm 官方下载统计，@baloise/web-app-utils 在 2026/10/08 – 2026/11/06 这 30 天内被下载 4,152 次，日均约 138 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @baloise/web-app-utils 还在维护吗？

最新版本 3\.17\.4 发布于 2026/07/01（4 个月前）；至今共发布 93 个版本，其中过去 12 个月发布了 7 个；首次发布于 2021/04/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。