51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

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

The旺
发布于 2024-11-29 22:03
浏览
1收藏

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());

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

注意点

  • 字符串与数字拼接 ：当加号两边至少有一个是字符串时，另一个数字会被转换成字符串，然后进行拼接。这里使用 toString() 方法将数字转换为字符串。
  • 加号的双重作用：如果两边都是数字，加号将执行求和操作。

1.2数字求和示例

let num1: number = 100;
let num2: number = 200;
console.log('totality', num1 + num2);

  • 1.
  • 2.
  • 3.

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%')
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

运行结果

DevEco Studio 实战第一节：字符串拼接与组件构建-鸿蒙开发者社区

2.1模板字符串的基本使用

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

示例代码

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

  • 1.
  • 2.
  • 3.
  • 4.

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

3.2 parseInt() 函数

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

示例代码

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

  • 1.
  • 2.
  • 3.

3.3 parseFloat() 函数

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

示例代码

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

  • 1.
  • 2.
  • 3.

示例代码

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%')
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

运行结果

DevEco Studio 实战第一节：字符串拼接与组件构建-鸿蒙开发者社区

4. 数字转字符串

4.1 toString() 方法

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

示例代码

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

  • 1.
  • 2.
  • 3.

4.2 toFixed() 方法

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

示例代码

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

// 将数字转换为字符串，并保留小数点后2位
console.log('toFixed:', money.toFixed(2));

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

示例代码

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%')
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

运行结果

DevEco Studio 实战第一节：字符串拼接与组件构建-鸿蒙开发者社区

组件解释

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

结语

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

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
OpenHarmony
其他
其他
ArkUI / eTS
标签
harmonyos
赞
收藏 1
回复
举报
1
回复
    相关推荐
    The旺
    这个用户很懒，还没有个人简介
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    《HarmonyOS Next开发进阶：打造功能完备的Todo应用华章》 0回复
    【有奖互动活动】# HarmonyOS 连接·突破# 我在现场活动​ 97回复
    #HarmonyOS连接·突破# 问题征集活动 40回复
    鸿蒙性能优化之卡顿优化 1回复
    鸿蒙Flutter开发知识地图 0回复
    相关问题
    如何实现ArkUI组件字符串变量拼接？ 1回答
    ArkUI组件的字符串中如何实现字符串变量拼接 1回答
    如何实现ArkUI组件字符串变量拼接 1回答
    应用引用media中的字符串资源如何拼接字符串 0回答
    HarmonyOS 有个字符串资源文件，后面怎么拼接字符串？ 1回答
    社区精华内容

    目录