外观
高级
字符串拼接
由于ArkTS为强类型语言，有很多组件要求传入的参数都为字符串，如Text()。直接将数字变量传入进去会报错，这时我们就需要将数字转换成字符串。若我们需要使用组件中的数字进行运算，我们还需要将字符串转化为数字。
字符串拼接使用 + 运算符，或使用模板字符串。＋ 运算符可以直接相加两个字符串对象，模板字符串则是使用`表示字符串对象，然后在内部使用${变量}。后者可以将字符串内部的占位符替换成具体的变量值。
let num: number = 123;
let str: string = "这是一个字符串";
console.log(`字符串的值：${str} 数字的值：${num}`) // 字符串的值：这是一个字符串 数字的值：123若 + 旁边的两个运算对象有一个为字符串，那么得到的结果也是字符串。
类型转换
- 字符串转换为数字
Number()：字符串，直接转为数字，若转换失败则返回NaN。（转换失败是由于字符串中含有非数字字符）parseInt()：去掉小数部分转数字，转换失败返回NaN；parseFloat()：保留小数部分，转换失败返回NaN。
实际使用时常常使用Number()转换为数字。
console.log("Number(num1)", Number(num1)) // 1.1
console.log("Number(num2)", Number(num2)) // 1.9
console.log("Number(num3)", Number(num3)) // NaN
console.log("Number(num4)", Number(num4)) // NaN
console.log("parseInt(num1)", parseInt(num1)) // 1
console.log("parseInt(num2)", parseInt(num2)) // 1
console.log("parseInt(num3)", parseInt(num3)) // 1
console.log("parseInt(num4)", parseInt(num4)) // NaN
console.log("parseFloat(num1)", parseFloat(num1)) // 1.1
console.log("parseFloat(num2)", parseFloat(num2)) // 1.9
console.log("parseFloat(num3)", parseFloat(num3)) // 1.1
console.log("parseFloat(num4)", parseFloat(num4)) // NaN- 数字转换为字符串
toString()：数字直接转换为字符串。toFixed()：数字转换为字符串，可选择保留几位小数，四舍五入。
let num1: number = 1.234
let num2: number = 1234
@Entry
@Component
struct Index {
build() { // 在这里面写代码
Column() {
Text(num1.toString())
Text(num2.toString())
Text(num1.toFixed(2))
Text(num2.toFixed(2))
}
}
}事件交互
事件交互可以让我们为组件的事件被触发后执行某些事情，比如点击一个按钮后弹出一个文字提示。
我们以最简单的点击事件为例。点击事件使用.onClick(callback)语法，可以加在按钮上。callback为一个函数，在事件被触发时执行。
function show() {
AlertDialog.show({
message: "弹出一个文本提示"
})
}
@Entry
@Component
struct Index {
build() { // 在这里面写代码
Column() {
Row() {
Button("按钮")
.onClick(show)
}.height("100%")
}.width("100%")
}
}
状态管理
这里先引入两个概念：
- 普通变量：只在初始化时渲染，后续将不再刷新。
- 状态变量：需要装饰器装饰，改变会引起UI的渲染刷新（必须设置类型和初始值）
所以我们要改变元素的状态时，就可以通过改变状态变量的值来达到目的。
@Entry
@Component
struct Index {
@State msg: string = "Hello World!"
build() {
Row() {
Column() {
Text(this.msg)
Button("改变文字").onClick(() => {
this.msg = "你好，世界！"
})
}.width("100%")
}.height("100%")
}
}在组件内定义的变量，无论是何种变量，都需要使用this进行访问。
let name: string = "张三";
@Entry
@Component
struct Index {
age: number = 18;
@State msg: string = "Hello World!"
build() {
Row() {
Column() {
Text(name).onClick(()=>{
name = "李四";
console.log("name: ", name) // 值被改变，但是渲染不变
})
Text(this.age.toString()).onClick(()=>{
this.age = 20;
console.log("this.age: ", this.age) // 值被改变，但是渲染不变
})
Text(this.msg).onClick(()=>{
this.msg = "你好世界";
console.log("this.msg: ", this.msg) // 值被改变，渲染也被改变
})
}.width("100%")
}.height("100%")
}
}运算符
ArkTS中数字间可进行加减乘除和取余运算。
+：相加，返回两个数的和。-：相减，返回两个数的差。*：相乘，返回两个数的积。/：相除，返回两个数的商。%：取余，返回两个数相除后的余数。
这五个运算符和赋值运算符=配合，又可以组合出五个新的运算符。如+=，num += 1，相当于num = num + 1。
let num: number = 7
console.log("num + 2 = ", num + 2) // 9
console.log("num - 2 = ", num - 2) // 5
console.log("num * 2 = ", num * 2) // 14
console.log("num / 2 = ", num / 2) // 3.5
console.log("num % 2 = ", num % 2) // 1一元运算符
ArkTS有两个一元运算符：++和--，它们的作用相当于让变量增减一。
假设num为变量，则num++表示先使用num的值，再让num加一。--运算符也是这样。
let num: number = 1;
console.log("num++", num++); //1 num=2
console.log("++num", ++num); //3 num=3
console.log("--num", --num); //2 num=2
console.log("num--", num--); // 2 num=1比较运算符
比较运算符用于比较两个数据的大小，返回一个布尔值。
>：大于。>=：大于等于。<：小于。<=：小于等于。==：等于等于。!=：不等于。
console.log("1>1:", 1 > 1);
console.log("1>2:", 1 > 2);
console.log("1<2:", 1 < 2);
console.log("1>=2:", 1 >= 2);
console.log("1<=2:", 1 <= 2);==也可以判断两个字符串字面值是否一致。
逻辑运算符
逻辑运算符用于将并列的布尔运算合并，有三个：
&&：若两个布尔值有一个为假，则整个表达式为假。||：若两个布尔值有一个为真，则整个表达式为真。!：反转运算布尔值。
console.log("false && false:", false && false); // false && false: false
console.log("true && true:", true && true); // true && true: true
console.log("false && true:", false && true); // false && true: false
console.log("false || false:", false || false); // false || false: false
console.log("true || true:", true || true); // true || true: true
console.log("false || true:", false || true); // false || true: true
console.log("!false:", !false); // !false: true
console.log("!true:", !true); // !true: false运算符优先级
运算符优先级表示互相组合的运算符运算顺序，如我们的相加和赋值操作同时存在时，先相加再赋值，是因为赋值运算符的优先级低于相加运算符的优先级。
下表表示了运算符相互组合时运算符的优先顺序，从上往下优先级递减。
| 优先级 | 顺序 |
|---|---|
| 小括号 | () |
| 一元运算符 | ++、--、! |
| 算数运算符 | *、/、%先于+、- |
| 比较运算符 | >、<、>=、<= |
| 比较运算符 | ==、!= |
| 逻辑运算符 | 先&&后` |
| 赋值 | = |
数组的增加删除替换
| 操作 | 语法 |
|---|---|
| 查找 | 数组名[下标]、数组名.length |
| 修改 | 数组名[下标] = 新值 |
| 增加 | 数组名.push(数据1, 数据2, ...)、数组名.unshift(数据1, 数据2, ...) 前者为像数组的末尾追加值，后者为向数组的开始增加值 |
| 删除 | 数组名.pop()、数组名.shift() |
| 任意位置删除或增加 | 数组名.splice(操作的起始位置, 删除的个数, 新增1, 新增2) |
// 数组的查看和修改
// 1. 定义一个数组
let names: string[] = ['刘小备', '吕小布', '张大飞']
console.log('整个数组',names)
// 2. 数组取值(通过下标)
console.log('数组取值', names[1])
console.log('数组长度', names.length)
// 3. 数组修改(通过下标)
names[2] = '赵云'
console.log('修改数组', names)// 数组的增加和删除
// 定义一个数组
let songs: string[] = ['告白气球', '洋葱', '吻别']
// 添加
// 1. 往开头新增 unshift(新增的值) 返回操作后的数组的长度
songs.unshift('彩虹')
console.log('返回数组长度', songs.unshift('七里香'))
console.log('数组songs', songs)
// 2. 往结尾新增 push(新增的值) 返回操作后的数组的长度
songs.push('光辉岁月', '海阔天空')
console.log('数组', songs)
// 删除
// 1. 从开头删 shift
console.log('返回删除的项', songs.shift())
console.log('返回删除的项', songs.shift())
console.log('数组', songs)
// 2. 从结尾删 pop
songs.pop()
songs.pop()
songs.pop()
console.log('数组', songs)
// 开头(S): unshift(开头增) shift(开头删)
// 结尾(P): push(结尾增) pop(结尾删)// 在任意位置删除数组元素
// 定义一个数组
let songs: string[] = ['告白气球', '洋葱', '吻别', '双节棍', '曹操']
// splice 在任意位置进行删除或新增内容
// 数组名.splice(操作的起始位置, 删除几个, 新增的项1, 新增的项2, ...)
// 1. 删除(任意位置)
songs.splice(2, 2)
console.log('数组songs', songs)
// 2. 新增(任意位置)
songs.splice(1, 0, '彩虹') // 新增
// 3. 替换(删了一项, 又加了一项)
songs.splice(1, 1, '彩虹')
console.log('数组songs', songs)