鸿蒙星河版笔记来袭！字符串、类型转换、运算符等

鸿蒙星河版学习：

• 鸿蒙星河版笔记来袭！开发环境准备到基础函数的学习
• 鸿蒙星河版笔记来袭！对象、联合类型、枚举类型学
• 鸿蒙星河版笔记来袭！界面开发、组件的属性和方法
• 鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例
• 鸿蒙星河版笔记来袭！京东、美团等综合案例

一、字符串拼接

作用：把两个或多个字符串，拼成一个字符串。（通常拼接的是字符串和变量）

'hello' + 'world' => 'helloworld' 加号

加号 的作用：拼接

let name: string = '小明'
console.log('简介信息', '名字是')

简介信息 名字是 小明

let name: string = '小明'
console.log('简介信息', '名字是' + name)

注意：加法两端只要有字符串，就是拼接。

二、模板字符串

作用：拼接字符串和变量

优势：更适合于 多个变量 的字符串拼接

let name: string = '小明'
let age: number = 18
console.log('简介信息', `姓名是小明,今年18岁了`)

上面适合复杂场景，下面看看适合简易场景的

let name: string = '小明'
let age: number = 18
console.log('简介信息', '姓名是' + name + ',今年' + age + '岁了')

三、类型转换（数字和字符串）

1、字符串转数字

Number()：字符串 直接转数字，转换失败返回NaN（字符串中包含非数字）

parseInt()：去掉小数部分 转数字，转换失败返回NaN

parseFloat()：保留小数部分 转数字，转换失败返回NaN

2、数字转字符串

toString()：数字直接转字符串

toFixed()：四舍五入转字符串，可设置保留几位小数

四、交互-点击事件

说明：组件 被点击时 触发的事件

作用：监听（感知）用户 点击行为，进行对应操作

语法：onClick( (参数) => {} )

Button('点我, 显示弹框')
   .onClick(() => {
     AlertDialog.show({
       message: '你好-这是个弹框'
     })
})

五、状态管理

之前构建的页面多为静态界面。

但如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念

点击交互 触发了 文本状态变更，状态变更 引起了 UI渲染

普通变量：只能在初始化时渲染，后续将不会再刷新。

状态变量：需要装饰器装饰，改变会引起 UI 的渲染刷新 （必须设置 类型 和 初始值）

注意：定义在 组件内 普通变量 或 状态变量，都需要 通过 this 访问

案例：计算器案例

核心思路：

• 1. 准备 状态变量 → @State count: number = 1
• 2. 注册 点击事件 → onClick
• 3. 点击时，修改 状态变量
• 4. 状态变量变化，界面自动更新

六、运算符

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

赋值运算符：对变量进行 赋值 的运算符，如：=

案例 点赞案例

一元运算符

常见一元运算符：++ 和 --

• l 后置写法：先赋值后自增/自减
• l 前置写法：先自增/自减再赋值

比较运算符

作用：用来 判断比较 两个数据 大小，返回一个布尔值（true / false）

逻辑运算符

作用：扩充判断条件

运算符优先级

综合案例 — 美团购物车

需求分析：

1. 商品区域：数字框 + -

2. 底部结算：联动计算 并 渲染展示
① 已选件数
② 总价格
③ 优惠价格

核心思路：
1. 提取状态：数量、原价、现价
2. 界面绑定
3. 点击修改数据，自动更新