头图

DevEco Studio 实战第一节:字符串拼接与组件构建

引言

在现代软件开发中,TypeScript 提供了强类型的优势,而 DevEco Studio 作为华为推出的开发集成环境,提供了便捷的代码管理和版本控制功能。本文将通过一个简单的示例,介绍如何在 TypeScript 和 DevEco Studio 中进行字符串拼接以及如何构建基本的组件。

第一节

1.1字符串拼接

在 TypeScript 中,字符串拼接是一个常见的操作,可以通过加号(+)运算符来实现。当加号两边至少有一个是字符串时,它将执行字符串拼接操作。

示例代码
let name: string = 'thewang';
let age: number = 19;

console.log('Personal information:', 'name' + name);
console.log('Personal information:', 'age' + age.toString());
注意点
  • 字符串与数字拼接:当加号两边至少有一个是字符串时,另一个数字会被转换成字符串,然后进行拼接。这里使用 toString() 方法将数字转换为字符串。
  • 加号的双重作用:如果两边都是数字,加号将执行求和操作。
1.2数字求和示例
let num1: number = 100;
let num2: number = 200;
console.log('totality', num1 + num2);
1.示例
let name: string = 'thewang'
let age: number = 19
console.log('Personal information:', 'name' + name);
console.log('Personal information:', 'age' + age.toString());

let num1: number = 100
let num2: number = 200
console.log('Personal information:', 'name' + name);
console.log('Personal information:', 'age' + age.toString());


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果

在这里插入图片描述

2.1模板字符串的基本使用

模板字符串允许你在字符串中直接嵌入变量和表达式,通过 ${expression} 的形式插入。这种方式使得字符串拼接更加直观和简洁。

示例代码
let name: string = 'thewang';
let age: number = 19;
// 使用模板字符串拼接信息
console.log(`Personal information:name: ${name}, age: ${age}`);

3.字符串与数字的转换

3.1 Number() 函数

Number() 函数用于将字符串转换为数字。如果字符串是有效的数字格式,它将被转换为相应的数字;否则,结果将是 NaN(Not a Number)。

示例代码
let str1: string = '1.1';
let str2: string = '1.8a';
let str3: string = 'a';

console.log('Number', Number(str1)); // 1.1
console.log('Number', Number(str2)); // 1.8
console.log('Number', Number(str3)); // NaN

3.2 parseInt() 函数

parseInt() 函数用于将字符串转换为整数,它会自动忽略字符串中的非数字字符,直到遇到第一个非数字字符为止,然后停止解析。

示例代码
console.log('parseInt', parseInt(str1)) // 1
console.log('parseInt', parseInt(str2)) // 1
console.log('parseInt', parseInt(str3)) // NaN

3.3 parseFloat() 函数

parseFloat() 函数用于将字符串转换为浮点数,它也会忽略字符串中的非数字字符,直到遇到第一个非数字字符为止,然后停止解析。

示例代码
console.log('parseFloat', parseFloat(str1)) // 1.1
console.log('parseFloat', parseFloat(str2)) // 1.8
console.log('parseFloat', parseFloat(str3)) // NaN
示例代码
let str1: string = '1.1';
let str2: string = '1.8a';
let str3: string = 'a';

console.log('Number', Number(str1)); // 1.1
console.log('Number', Number(str2)); // 1.8
console.log('Number', Number(str3)); // NaN

console.log('parseInt', parseInt(str1)) // 1
console.log('parseInt', parseInt(str2)) // 1
console.log('parseInt', parseInt(str3)) // NaN

console.log('parseFloat', parseFloat(str1)) // 1.1
console.log('parseFloat', parseFloat(str2)) // 1.8
console.log('parseFloat', parseFloat(str3)) // NaN

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果

在这里插入图片描述

4. 数字转字符串

4.1 toString() 方法

toString() 方法用于将数字转换为字符串。这个方法可以接受一个参数,即基数(从2到36),用于指定转换的进制。如果不指定参数,默认使用10进制。

示例代码
let money: number = 100;
// 将数字转换为字符串
console.log('toString:', money.toString());

4.2 toFixed() 方法

toFixed() 方法用于将数字转换为字符串,并保留指定的小数位数。这个方法会自动进行四舍五入。

示例代码
// 将数字转换为字符串,并保留小数点后0位
console.log('toFixed:', money.toFixed());

// 将数字转换为字符串,并保留小数点后2位
console.log('toFixed:', money.toFixed(2));
示例代码
let money: number = 100
console.log('toString:', money.toString())
console.log('toFixed:', money.toFixed())
console.log('toFixed:', money.toFixed(2))

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text('商品价格: ¥' + money.toFixed(2))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果

在这里插入图片描述

组件解释

  • @Entry 和 @Component:这些装饰器用于标记这是一个组件的入口点,并且定义了一个组件。
  • @State:用于定义组件的状态,类似于 React 中的 state。
  • build 方法:这是组件的构建方法,返回组件的 UI 结构。
  • Row 和 Column:这些可能是布局组件,用于创建行和列的布局。
  • Text:用于显示文本的组件。
  • 样式设置.fontSize(50).fontWeight(FontWeight.Bold) 分别用于设置字体大小和字体权重。

结语

通过本文,我们学习了 TypeScript 中的字符串与数字转换技巧以及如何在 DevEco Studio 中构建基本的组件。这些基础知识将为进一步学习前端开发和使用 DevEco Studio 打下坚实的基础。希望本文能够帮助你更好地理解和应用这些技术。


The_Wang
1 声望0 粉丝

华为鸿蒙HarmonyOS Next大学生开发者